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

Usage

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

Behavior

• Touch area

  A whole list item area should be tappable when the item is presented with a selection control in order to help users easily select an item.

  

  A whole area should be tappable when a list item is presented with a selection control.

• Applying 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 also have an icon.

  

  Selection controls components cannot be provided along with 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 are found next to the main text of a list item. You can design a switch to turn off all sub-items related to one parent item. Subtext is not recommended, but if necessary, use it to describe the function.

  Switch in developer's guides
  Native	Check > on and off
  Web	-

  

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

• Checkboxes

  Checkboxes are used 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.