Selection Controls

Edit me

Toggle

Toggle switches must:

• Provide on/off functionality (iOS Human Interface Guidelines, Material.io)
• Differentiate between checked and unchecked states (iOS Human Interface Guidelines)
• Have a text label relating to the option that the switch controls (Material.io)

When a user selects a toggle, the action must take place immediately (Material.io).

Radio Buttons

Radio buttons must:

• Allow a user to select a single option from a list of pre-set options (GOV.UK Design System, Material.io)
• Differentiate between checked and unchecked states (Material.io)
• Have a text label relating to the option

Avoid pre-selecting radio buttons.

Checkboxes

Checkboxes must:

• Offer the user one or more pre-set options from a list (GOV.UK Design System, Material.io).
• Be independent from each other: selecting one checkbox does not unselect others
• Differentiate between checked and unchecked states (Material.io)
• Have a text label relating to the option

Avoid pre-selecting checkboxes.

Dropdown/pickers

Dropdown/pickers include one or more scrollable lists of values (iOS Human Interface Guidelines), such as date, time, country, or blood type.

The app design can use dropdown/pickers to select from multiple options, such as selecting a country from a pre-set list.

Dropdown/pickers must:

• Appear at the bottom of the screen (the height of five rows of values) (iOS Human Interface Guidelines)
• Display values in a logical and predictable order (iOS Human Interface Guidelines), such as:
  • List of countries in alphabetical order
  • Dates shown in calendar order
• Provide an appropriate default value (iOS Human Interface Guidelines)