Switch
Huro provides nicely styled switch checkboxes when you need to
display such control in yoour forms. Huro switches have
several color modififers. Available modifiers are
is-primary, is-success,
is-info is-warning,
is-danger. Please refer to the markup for more
details about usage.
<div class="field is-grouped">
<div class="control">
<label class="form-switch">
<input type="checkbox" class="is-switch">
<i></i>
</label>
</div>
<div class="control">
<label class="form-switch is-primary">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
</div>
<div class="control">
<label class="form-switch is-success">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
</div>
<div class="control">
<label class="form-switch is-info">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
</div>
<div class="control">
<label class="form-switch is-warning">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
</div>
<div class="control">
<label class="form-switch is-danger">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
</div>
</div>
Thin Switch
Huro also provides thin switch checkboxes when you need to
display such control in yoour forms. Huro switches have
several color modififers. Available modifiers are
is-primary, is-success,
is-info is-warning,
is-danger. Please refer to the markup for more
details about usage.
<div class="field is-grouped">
<div class="control">
<div class="thin-switch">
<input id="thin-switch-1" class="input" type="checkbox" />
<label for="thin-switch-1" class="slider"></label>
</div>
</div>
<div class="control">
<div class="thin-switch is-primary">
<input id="thin-switch-2" class="input" type="checkbox" checked />
<label for="thin-switch-2" class="slider"></label>
</div>
</div>
<div class="control">
<div class="thin-switch is-success">
<input id="thin-switch-3" class="input" type="checkbox" checked />
<label for="thin-switch-3" class="slider"></label>
</div>
</div>
<div class="control">
<div class="thin-switch is-info">
<input id="thin-switch-4" class="input" type="checkbox" checked />
<label for="thin-switch-4" class="slider"></label>
</div>
</div>
<div class="control">
<div class="thin-switch is-warning">
<input id="thin-switch-5" class="input" type="checkbox" checked />
<label for="thin-switch-5" class="slider"></label>
</div>
</div>
<div class="control">
<div class="thin-switch is-danger">
<input id="thin-switch-6" class="input" type="checkbox" checked />
<label for="thin-switch-6" class="slider"></label>
</div>
</div>
</div>
Switch Block
You might have to add a label to your switches in some cases. If so, use the switch block markup, which provides a nice and clean flexbox layout. See the code example for more details about usage.
<div class="switch-block">
<label class="form-switch">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
<div class="text">
<span>Some option</span>
</div>
</div>
Thin Switch Block
You might have to add a label to your switches in some cases. If so, use the switch block markup, which provides a nice and clean flexbox layout. See the code example for more details about usage.
<div class="thin-switch-block">
<div class="thin-switch">
<input id="thin-switch-7" class="input" type="checkbox" checked />
<label for="thin-switch-7" class="slider"></label>
</div>
<div class="text">
<span>Some option</span>
</div>
</div>