Select

A form field that allows the selection of one or more items from a predefined list of options.

Content

  • Sentence case
  • Ideal: 1-3 words (up to 15 characters)
  • Never truncate a label
Do
Selects-DoDont-Copy-Do
Don’t
Selects-DoDont-Copy-Dont

 

Placeholder copy

Use the phrasing “Choose a [xxxx]”, where “xxxx” equals the specific of what they’re selecting, e.g.: roles, rate, location, etc. If the options can’t be easily summarized under one specific word, use “Choose an option”.

Translations: use the infinitive “elegir” for choose.

Selects-Example-PlaceholderCopy-1
Selects-Example-PlaceholderCopy-2

Use “Search for [xxxx]” as placeholder copy, where “xxxx” equals the specific thing they can search there (e.g. roles, names, groups, etc.)

Selects-Example-PlaceholderCopy-3
Selects-Example-PlaceholderCopy-4

Types

Single selection

Use when only one option can be selected AND there are 5+ options in the list. If 4 options or fewer, use a radio button group, chip group, segmented control or selection card.

Selects-Example-Single

 

Multi-selection

Use when multiple options can be selected AND there are 5+ options in the list. If 4 options or fewer, use a checkbox group , chip group, or selection card.

Selects-Example-Multi-1
Selects-Example-Multi-2

 

Multi-selection: overflow

  • Chips (default): use chips whenever possible. Chips allow users to see what they’ve selected and remove options without opening the dropdown. Note: all the user’s selections are shown, so be mindful of vertical height.
  • Plain text - Comma separated: use only when vertical real estate is scarce. This option may require truncation, which means the user has to open the dropdown to see the full list of selections.
  • Plain text - Overview: use rarely and only when combining content is needed.
Selects-Example-Multi-Overflow

 

Multi-selection: character count

Chips have a character count limit of 28, at which point they will truncate with an ellipse. Plain text content does not have a specific character limit, but will use also use a tooltip on hover when truncated.

Selects-Example-CharacterCount

 

Clear content

The clear functionality is optional for either multi-select or single select. It appears on hover, in place of the caret. Clearing content on hover changes the state to default + focus. Do not use a clear icon when a select always has a default selection, such a single-select sort.

Selects-Example-Hover-1
Selects-Example-Hover-2
Selects-Example-FocusFilled-1
Selects-Example-FocusFilled-2

 

With search + autocomplete

In a scenario where search is required, use the text input itself as a search field.

Selects-Example-Search-Yes
Selects-Example-Search-No

 

With apply / cancel

In a scenario where selections need to be applied as a batch, turn on the “buttons” variant. Batching selections helps to improve performance, especially when filtering large amounts of data.

Selects-Example-Apply-Cancel

 

Required vs. optional

Use required and optional indicators depending on their frequency. e.g. If more fields are optional, only mark required fields, and vice versa.

Selects-Example-Required
Selects-Example-Optional

 

Select none vs all

Select none

If a user wants to reset to this default, the user would deselect any selected options or choose the clear icon in the text input.

Selects-Example-None-1
Selects-Example-None-2

 

Select all

When “All” is selected, the word “All” is the content in the input and all the options in the dropdown are selected (including “All”.) As soon as any item is selected, the “All” checkbox changes to the “indeterminate” state and chips begin to fill the text field.

Selects-Example-All

 

Placement

Horizontal

Space selects and text fields 16px apart.

Selects-Example-Placement-Horizontal

 

Vertical

Space selects and text fields 40px apart.

Selects-Example-Placement-Vertical

 

Grouping

  • Use dividers to differentiate between groups of items
  • Add group labels when there are more 3 or more groups
  • Groups can be applied to both single and multi-selection inputs
Selects-Example-Grouping

 

Label

Labels can be placed on top of a select, on the side side or hidden. When there is limited space, such as in mobile, use the top label.

Selects-Example-Label

 

No label

If a scenario requires no label, choose a clear the leading icon. If possible, ensure the context around the input gives further clues to its content.

Selects-Example-NoLabel

 

Best practices

Scroll

The maximum number of visible lines in a context menu are 6. Anything above 6 should be indicated with a hidden scrollbar built into the component.

Do
Selects-DoDont-Scroll-Do
Don’t
Selects-DoDont-Scroll-Dont

Icons

Using leading icons in is optional. Use them to create an identifiable visual indicator for a common action or clarify an action if text alone is not enough to explain its functionality. Don’t use icons for cases when text clearly explains the functionality and don’t skip using icons when they can make the actions easier to understand.

 

Hierarchy

Use equal hierarchy in context menus when actions are considered equal. Group and split actions when there’s one or more actions with a different purpose, like a destructive delete.

Do
Selects-DoDont-Hierarchy-Do
Don’t
Selects-DoDont-Hierarchy-Dont

 

Native app

Avoid using the dropdown from the select. Instead, use a native picker, menu or list component.

Do
Selects-Example-NativeApp-Do

 

Don’t
Selects-Example-NativeApp-Dont

 

 

Alternatives

Single Select

Selects-Example-NativeApp-Single

 

Multi Select

Selects-Example-NativeApp-Multi-1
Selects-Example-NativeApp-Multi-2

 

Resources

(internal only)

Figma

Storybook

Enhancements