Select

Select allows users to select a single option or multiple options from a menu of items.

Overview

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.

Anatomy

Multiselect

Single-Select

1. Label: Describes the selection the user needs to make.
2. Hint text (optional): Text to help add context to the label or help users choose the right option.
3. Select field: Area that displays the selection or selections made.
4. Menu: Container that holds the listbox when the select field is active.
5. Listbox: The list of options.
6. List item: An individual option in the listbox.

Demo

Open the component in Figma.

When to use

Use select for these scenarios:

• When you have a predefined set of four or more options that users need to select from.

When not to use

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.

Similar components

Variants

Default

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.

Inline

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.

Native

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.

Behaviors

Placement

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

Scrolling is up to the browser. It starts when the height of the list items is greater than the available height in the list.

Grouping

List items can be grouped under a section heading, a dividing line, or a combination of both.

Selection

• 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.

Overflow

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.

Loading

The menu shows a loading state while list items are populated. See circular progress.

Accessibility

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.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for combobox.

Content guidelines

Label

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.

Do

Don't

Hint text (optional)

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.

Section heading (optional)

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.

List items

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.

Make list item names harmonious and use words the user understands.

Avoid using list item names that are inconsistent or potentially unfamiliar.

Content accessibility

No additional content is needed for accessibility tags or labels.

Figma: Select