Content
- Sentence case
- Ideal: 1-3 words (up to 15 characters)
- Never truncate a label
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.
Use “Search for [xxxx]” as placeholder copy, where “xxxx” equals the specific thing they can search there (e.g. roles, names, groups, etc.)
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.
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.
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.
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.
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.
With search + autocomplete
In a scenario where search is required, use the text input itself as a search field.
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.
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.
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.
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.
Placement
Horizontal
Space selects and text fields 16px apart.
Vertical
Space selects and text fields 40px apart.
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
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.
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.
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.
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.
Native app
Avoid using the dropdown from the select. Instead, use a native picker, menu or list component.
Do
Don’t
Alternatives
Single Select
Multi Select
Resources
(internal only)