Selection Controls

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.

Checkboxes

States [checked] [disabled]

Guidelines

  • Labels should be sentence case and ≤ 20 characters.
  • Use only when multiple selections are permitted.
Don't use in cases where users should make single selections.
Don't use excessively long labels..

Radios

States [checked] [disabled]

Guidelines

  • Labels should be sentence case and ≤ 20 characters.
  • Use only when single selections are permitted.
Don't use in cases where users can make multiple selections.
Don't use excessively long labels.

Switches

Containers .switch .switch-label
Required .switch-option
States .switch-option-off .switch-option-on .is-disabled
HTML Elements .switch-checkbox .switch-selector

Guidelines

  • The labels must only be "OFF" and "ON" in caps.
  • Use switches like checkboxes.
  • For swapping between different views of data—e.g. percentage vs. count—use a toggle button.
Don't use non-standard labels.
Don't use a switch for a toggle.

Selectable Rows

I have an icon.
Another option for this button group.
I have no icon
Container(s) .btn-group-stacked
Required .btn-group-item .btn-selectable .btn-content
Modifiers .has-icon
States .is-active