Checkboxes
States | [checked] [disabled] |
Guidelines
- Labels should be sentence case and ≤ 20 characters.
- Use only when multiple selections are permitted.


Selection controls allow the user to make a selection from a set of options using checkboxes, radios, or switches. Checkboxes allow the user to select multiple options, while radios and switches only allow one option to be selected.
States | [checked] [disabled] |
States | [checked] [disabled] |
Containers | .switch .switch-label |
Required | .switch-option |
States | .switch-option-off .switch-option-on .is-disabled |
HTML Elements | .switch-checkbox .switch-selector |
Container(s) | .btn-group-stacked |
Required | .btn-group-item .btn-selectable .btn-content |
Modifiers | .has-icon |
States | .is-active |