Select allows users to select a single option or multiple options from a menu of items.
Use select when you have a predefined set of options that users need to select from. You can also use a select when there isn’t enough space for all of the options to be displayed outside of a menu.
- Label: Describes the selection the user needs to make.
- Hint text (optional): Text to help add context to the label or help users choose the right option.
- Select field: Area that displays the selection or selections made.
- Menu: Container that holds the listbox when the select field is active.
- Listbox: The list of options.
- List item: An individual option in the listbox.
Open the component in Figma.
Use select for these scenarios:
- When you have a predefined set of four or more options that users need to select from.
Use another type of input for scenarios where you have fewer options or more constraints.
Use autocomplete instead:
- When you need an enhanced menu that can display suggestions or be filtered.
Use radio button group instead:
- If there are only two or three options to choose from to reduce users’ cognitive load.
Commonly used within forms to allow users to input data and interact with an application or website.
This use case offers two variants:
- Single select: Allows the user to select a single list item.
- Multiselect: Allows the user to select multiple list items.
Used only when there is no validation needed, including to sort a list or move from one page to another. This use case is styled to have less visual prominence in a page to align to its uses.
- Don’t use this variant in a form.
The appearance and behavior of native select is controlled by the browser, so it’s the variant to use:
- When your experience is primarily mobile. Using the native select of the platform improves the experience.
- When there are performance constraints. Native select performs better due to its simplicity.
Placement is done automatically. The menu is positioned under its anchor element. If there isn’t room in the viewport, it will be be positioned on top of the anchor element.
Scrolling is up to the browser. It starts when the height of the list items is greater than the available height in the list.
List items can be grouped under a section heading, a dividing line, or a combination of both.
- In a single select, after an option is selected, the menu closes and the select field is updated.
- Inline select functionality is the same as single select, but an option must be selected by default. Inline select requires a selection from the menu at all times.
- In a multiselect, the menu remains open until the select field is closed by the user.
- In all cases, a user can close the menu by clicking outside of the menu, using the esc key, or by focusing on a different area of the page.
In a single select, the text will truncate when the list item label is longer than its space in the select field.
In a multiselect, the select field displays as many list items as can fit in the space. If there isn’t enough space, an overflow count is displayed next to the list items to show how many other items are selected in the listbox. When a user interacts with the component, the input’s height expands to display all the list items.
The menu shows a loading state while list items are populated. See circular progress.
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Describes the selection the user needs to make.
- Every select requires a label.
- Use three words or less.
- Use sentence case.
- Don’t use punctuation.
- Avoid articles (the, an, a).
- Be descriptive, not instructional.
Adds context to the label or helps users understand the selection they need to make.
- Be concise. Try to use one short sentence. For example, Select a role for this admin.
A heading that groups related list items to help findability.
- Concisely label what the list items have in common.
- Each label should be one to three words.
- Create at least two sections.
- Make the section headings as parallel as possible for readability.
The options users can select.
- Be concise.
- Make list item names harmonious and use words the user understands.
- Write in sentence case (capitalize the first word and proper nouns only).
- Don’t use end punctuation.
- Avoid articles, including the, an, a.
Order items in a logical, intentional way to help the user find a specific option:
- Most used to least used
- Increasing order (smallest to largest)
- Alphabetically if appropriate. Be aware that items may have to reorder during translation.
- Recommended item first.
No additional content is needed for accessibility tags or labels.