Switch
Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches.
| Class | Type | |
|---|---|---|
switch
|
Switch | A class representing a switch |
<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" checked="true" />
States
To disable a switch, add the following class:
| Attribute | Type | |
|---|---|---|
disabled
|
Disabled | Use whenever clicking on a switch isn’t allowed. |
<input type="checkbox" class="switch" disabled />
<input type="checkbox" class="switch" checked="true" disabled />
Sizes
There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly.
| class | Type | |
|---|---|---|
is-small
|
Small | |
| - | Medium | |
is-large
|
Large |
<input type="checkbox" class="switch is-small" />
<input type="checkbox" class="switch" checked="true" />
<input type="checkbox" class="switch is-large" />
Best Practice
Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label.
Switches refer to a single item and allow turning an item on or off.
Do
If each item in a set can be independently controlled, use switches to allow on or off options.
Don't
Do not use radio buttons to allow on or off options.