Skip to content
search icon
clear
Component Status

Selection controls

Selection controls allow users to select options, make decisions and set preferences.

Guidelines

Selection controls are to be visible and understandable at a quick glance. Selected options are more visible than unselected. Selection controls are always accompanied with a clear label. Make sure that the labels are surrounded with a Clickbound that activates the selection control as well as the control itself.

Don't

  • Do not mix different selection controls within a grouped list.
  • Do not use a selection control without a label.
  • Do not resize any of the selection controls.

Variations

Switch

Switches allow users to toggle a single item between two possible states, taking immediate action. The most common states for a switch is "on/off". There are two variations of the switch provided: Small switch and Switch. The small switch is best for tight spaces and should be used with caution.

Don't

  • Do not nest switches, use checkboxes instead.

Small switch on

FigmaExternal linkFigma design sketches of small switch in state on

Small switch off

FigmaExternal linkFigma design sketches of small switch in state off

Switch on

FigmaExternal linkFigma design sketches of  switch in state on

Switch off

FigmaExternal linkFigma design sketches of  switch in state off

Checkbox

Checkboxes allow users to select one or more items from a list. Checkboxes can be used to turn an option on or off. Generally, checkboxes are used with a confirmation action, however, they can also take immediate effect. The default state of a checkbox is having no option selected.

Checkboxes can be nested children.

  • When a parent checkbox is selected, all following children are selected.
  • When a parent checkbox is unselected, all following children are unselected.
  • When a child is unselected while other children are selected, the parent checkbox becomes indeterminate.

Checkbox selected

FigmaExternal linkFigma design sketches of selected checkboxes

Checkbox unselected

FigmaExternal linkFigma design sketches of unselected checkboxes

Checkbox indeterminate

FigmaExternal linkFigma design sketches of indeterminated checkboxes

Radio

Radio buttons allow users to choose one single option from a list of mutually exclusive options. The default state of a radio button is to have one option selected.

Don't

  • Do not use radio buttons when the user can select more than one item.
  • Do not use a radio button without one item being selected by default.

Radio button selected

FigmaExternal linkFigma design sketches of selected radio

Radio button unselected

FigmaExternal linkFigma design sketches of unselected radio

Demo

Checkbox single

Checkbox multiple

We are in this together! 🙌

Radio single

Radio group

We are in this together! 🙌

Switch default

Switch small

✏️ Edit this page on GitHub