Selection Controls

Selection controls enable users to choose an item. The appropriate type will depend on how you want to present items for the user’s selection.

Usage

Use selection controls are used with list items or text when users need to make selections or toggle between on and off.

Behavior

• Touch area

  Make an entire list item area tappable when the item appears with a selection control so users can select an item easily.

  

• Apply the value

  We recommend that the chosen value is immediately applied when users make a selection.

• Single control

  A list item can only have one type of selection control. List items with a selection control cannot have an icon.

  

• Use in text content

  Selection controls only appear on list items, except for checkboxes that are used on the body of text content.

Types

• Switches

  Switches toggle a feature on and off and appear next to the main text of a list item. You can design a switch to turn off all subitems related to one parent item. We do not recommend using subtext, but you can do so if necessary to describe the function.

  Switch in developer's guides
  Native	Check > & off
  Web	―

  

  Subtext for a switch should provide a description, not on/off status.

• Checkboxes

  Use checkboxes to select multiple items from a list or in confirmation pop-ups.

  Checkbox in developer's guides
  Native	Check
  Web	Checkbox

  

  Checkboxes allow for multiple selections in a list.

• Radio buttons

  Radio buttons are used instead of checkboxes when users can only select a single item from a list. When users tap a list item with a radio button, that item is brought into focus in the center of the screen.

  Radio button in developer's guides
  Native	Radio
  Web	Radio button

  

  Radio buttons are usedwhen users can select only one item from a list.