# 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

Transactional
Marketing
Transactional
Marketing

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

Open rate
Click rate
Open rate disabled
Click rate disabled

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

Off
On
Off
On
Off
On

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

Option 1
I have an icon.
Option 2
Another option for this button group.
Option 3
I have no icon

Container(s) | .btn-group-stacked
Required | .btn-group-item .btn-selectable .btn-content
Modifiers | .has-icon
States | .is-active