Components - Selection controls

Selection controls allow the user to select options. Three types of selection controls are covered in this guidance:

• Checkboxes allow the selection of multiple options from a set.
• Radio buttons allow the selection of a single option from a set.
• Switches allow a selection to be turned on or off.

Checkbox

• Checkboxes allow the user to select multiple options from a set.
• If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.
• If you have a single option, avoid using a checkbox and use an on/off switch instead.

Radio button

• Radio buttons allow the user to select one option from a set.
• Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.
• Otherwise, consider a dropdown, which uses less space than displaying all options.

Switch

• On/off switches toggle the state of a single settings option.
• The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.
• Switches take on the same visual properties of the radio button.

Specs

For specs Click Here.