On this page

Components

Depending on the type of selection (single- or multi-), you can choose between different types of patterns.

A switch that turns an option on or off.
With this form element, users can choose one of a predefined set of options.
A form element that lets users choose a single item from a list of items.
A checkbox is a form element where users can make a binary choice.
A form element that's an extension of a radio group with additional metadata to facilitate comparisons or progressive disclosure. As with a radio group, tiles allow the user to choose one of a predefined set of options.
With a form element, users can choose multiple items from a list of options.
An input that provides a list of suggestions that the user can choose from.

Criteria

Single-select patterns

User can select only one item from the list of options.

ToggleRadioTilesSelectAutosuggest
Number of items2 items that activate or deactivate a setting2-7 items2-7 items8+ items8+ items including user generated inputs
Additional metadata per item-DescriptionsDescriptions, lists, and/or imagesIcons, descriptions, and/or tags-

Multiselect patterns

User can select multiple items from the list of options.

Check boxMultiselect
Number of items1 to 7 items8+ items
Additional metadata per itemDescriptionsIcons, descriptions, and or tags

Number of items

The fastest way to find and select an item in a list of seven or fewer is to see all the options at once by using check boxes or radio buttons. After seven items, we recommend using a select or multi-select dropdown list to reduce the space the group of items takes on the page and to help the user more easily scan larger groups of items.

Additional metadata

In some cases, users will be able to make faster, more informed decisions by seeing descriptions, icons (such as database types), or by having comparative details across all the items in the list (such as instance storage amount, RAM, or cost). In these cases, use the pattern that works best with the metadata you have.