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.

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

  • 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.

    Selection controls components cannot have icons.

  • 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.