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 anatomy

Multiselect anatomy

Single-Select anatomy

Single-Select anatomy

  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

Storybook failed to load. Please connect to the VPN to access.

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.

null

Multiselect

Allows the user to select multiple list items.

null

Inline

For selects that appear on the same horizontal line as another field.  This variant allows hidden labels.

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

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.

[add visual example]

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.

States

Default

The default state lets users know a select is enabled.

 

Disabled

The disabled state prevents a user from initiating an action. The context of the page or component should make it clear why the element is disabled and what needs to change in order to be able to use it.

 

Error

The error state lets users know that a value needs to be entered in order to move forward or that a value that was entered is invalid.

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.
    • If using an inline variant, the label can be hidden. In Figma, you can either hide the label layer, or use the various Input field subcomponents under Hidden utilities in the UI kit.
  • Use three words or less.
  • Use sentence case.
  • Don’t use punctuation.
  • Avoid articles (the, an, a).
  • Be descriptive, not instructional.
Do

Do

Don't

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.
  • A link can be included. For example, Select a role for this admin. Learn more about roles.
    Use an external link icon when necessary.

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.

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

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

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

 

Content accessibility

If using the inline variant, the purpose of the input with a hidden label must be made clear in some other way contextually. In these cases, consult with the Odyssey team for an accessibility review.

  • In code, the label prop is still required. The label will be made accessible to screen reader text.
  • An HTML label element will still be rendered but visually hidden.

Figma: Select