Outlined Checkbox
Huro provides default styled checkboxes in 2 main styles,
outlined and solid. Those checkboxes
also support all main colors. The available modifiers are
is-primary, is-success,
is-info is-warning,
is-danger.
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" checked>
<span></span>
Option 1
</label>
<label class="checkbox is-outlined is-primary">
<input type="checkbox">
<span></span>
Option 2
</label>
<label class="checkbox is-outlined is-info">
<input type="checkbox">
<span></span>
Option 3
</label>
<label class="checkbox is-outlined is-success">
<input type="checkbox">
<span></span>
Option 4
</label>
<label class="checkbox is-outlined is-warning">
<input type="checkbox">
<span></span>
Option 5
</label>
<label class="checkbox is-outlined is-danger">
<input type="checkbox">
<span></span>
Option 6
</label>
</div>
</div>
Outlined Circle
Huro checkboxes can be circles instead of squares. Simply add
the is-circle modifier class to your
checkbox element. See the code example for more
details about usage.
<div class="field">
<div class="control">
<label class="checkbox is-circle">
<input type="checkbox">
<span></span>
Option 1
</label>
<label class="checkbox is-outlined is-circle is-primary">
<input type="checkbox">
<span></span>
Option 2
</label>
<label class="checkbox is-outlined is-circle is-info">
<input type="checkbox">
<span></span>
Option 3
</label>
<label class="checkbox is-outlined is-circle is-success">
<input type="checkbox">
<span></span>
Option 4
</label>
<label class="checkbox is-outlined is-circle is-warning">
<input type="checkbox">
<span></span>
Option 5
</label>
<label class="checkbox is-outlined is-circle is-danger">
<input type="checkbox">
<span></span>
Option 6
</label>
</div>
</div>
Solid Checkbox
Huro provides default styled checkboxes in 2 main styles,
outlined and solid. Those checkboxes
also support all main colors. The available modifiers are
is-primary, is-success,
is-info is-warning,
is-danger.
<div class="field">
<div class="control">
<label class="checkbox is-solid">
<input type="checkbox">
<span></span>
Option 1
</label>
<label class="checkbox is-solid is-primary">
<input type="checkbox">
<span></span>
Option 2
</label>
<label class="checkbox is-solid is-info">
<input type="checkbox">
<span></span>
Option 3
</label>
<label class="checkbox is-solid is-success">
<input type="checkbox">
<span></span>
Option 4
</label>
<label class="checkbox is-solid is-warning">
<input type="checkbox">
<span></span>
Option 5
</label>
<label class="checkbox is-solid is-danger">
<input type="checkbox">
<span></span>
Option 6
</label>
</div>
</div>
Solid Circle
Huro checkboxes can be circles instead of squares. Simply add
the is-circle modifier class to your
checkbox element. See the code example for more
details about usage.
<div class="field demo-select">
<div class="control">
<label class="checkbox is-circle">
<input type="checkbox">
<span></span>
Option 1
</label>
<label class="checkbox is-solid is-circle is-primary">
<input type="checkbox">
<span></span>
Option 2
</label>
<label class="checkbox is-solid is-circle is-info">
<input type="checkbox">
<span></span>
Option 3
</label>
<label class="checkbox is-solid is-circle is-success">
<input type="checkbox">
<span></span>
Option 4
</label>
<label class="checkbox is-solid is-circle is-warning">
<input type="checkbox">
<span></span>
Option 5
</label>
<label class="checkbox is-solid is-circle is-danger">
<input type="checkbox">
<span></span>
Option 6
</label>
</div>
</div>