Checkboxes
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>