<label class="switcher">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span><span class="switcher-handle"><span></span>
</label>
label.switcher
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
<label class="switcher is-tiny">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-small">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-normal">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-large">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-massive">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
label.switcher.is-tiny
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-small
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-normal
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-large
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-massive
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
<label class="switcher is-tiny">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-small">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">Yes</span>
<span class="switcher-false">No</span><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-normal">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">Authorized</span>
<span class="switcher-false">Unauthorized</span><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-large">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">Authorized safely</span>
<span class="switcher-false">Unauthorized safely</span><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-massive">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">Authorized easily</span>
<span class="switcher-false">Unauthorized easily</span><span class="switcher-handle"><span></span>
</label>
label.switcher.is-tiny
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
label.switcher.is-small
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true Yes
span.switcher-false No
span.switcher-handle
label.switcher.is-normal
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true Authorized
span.switcher-false Unauthorized
span.switcher-handle
label.switcher.is-large
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true Authorized safely
span.switcher-false Unauthorized safely
span.switcher-handle
label.switcher.is-massive
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true Authorized easily
span.switcher-false Unauthorized easily
span.switcher-handle
<label class="switcher is-tiny is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-small is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle">
</label>
<label class="switcher is-normal is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-large is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-massive is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher is-tiny is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span>
<span class="switcher-handle"><span></span>
</label>
<label class="switcher is-small is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span>
<span class="switcher-handle"><span></span>
</label>
<label class="switcher is-normal is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span>
<span class="switcher-handle"><span></span>
</label>
<label class="switcher is-large is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span>
<span class="switcher-handle"><span></span>
</label>
<label class="switcher is-massive is-rounded">
<input type="checkbox" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span>
<span class="switcher-handle"><span></span>
</label>
label.switcher.is-tiny.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-small.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher
label.switcher.is-normal.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-large.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-massive.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher.is-tiny.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
label.switcher.is-small.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
label.switcher.is-normal.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
label.switcher.is-large.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
label.switcher.is-massive.is-rounded
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
<label class="switcher">
<input type="radio" name="radio" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher">
<input type="radio" name="radio" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher">
<input type="radio" name="radio" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher">
<input type="radio" name="radio" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
label.switcher
input.switcher-input( type='radio' name="radio")
span.switcher-body
span.switcher-handle
label.switcher
input.switcher-input( type='radio' name="radio")
span.switcher-body
span.switcher-handle
label.switcher
input.switcher-input( type='radio' name="radio")
span.switcher-body
span.switcher-handle
label.switcher
input.switcher-input( type='radio' name="radio")
span.switcher-body
span.switcher-handle
<label class="switcher is-disabled">
<input type="checkbox" class="switcher-input"/><span class="switcher-body"><span class="switcher-handle"><span></span>
</label>
<label class="switcher">
<input type="checkbox" disabled="disabled" class="switcher-input"/><span class="switcher-body">
<span class="switcher-true">True</span>
<span class="switcher-false">False</span><span class="switcher-handle"><span></span>
</label>
label.switcher.is-disabled
input.switcher-input( type='checkbox')
span.switcher-body
span.switcher-handle
label.switcher
input.switcher-input( type='checkbox' disabled)
span.switcher-body
span.switcher-true True
span.switcher-false False
span.switcher-handle
Modifier | Description | Class |
---|---|---|
Size | changes the element size based on font-size | .is-tiny .is-small .is-normal .is-large .is-massive |
Rounded | add rounded corners to a switcher | .is-rounded |
Disabled | indicates that a switcher is disabled, equivalent to `switcher[disabled]` | .is-disabled |
You can extend the switcher component features by adding the switcher extension.