Select

Use a select element to allow a user to choose an option from a list. It is an ideal replacement for radio button groups when space is limited.

The primary difference between a select and a menu dropdown is their purpose:

• A select element is used for form input, where the user chooses one item from a list to define a value (e.g., choosing a country in a form).
• A menu dropdown is for actions or navigation (e.g., a "Settings" menu).

There are additional visual distinctions.

• A select element will show the selected option in the toggle, while a menu dropdown’s toggle text remains the same.
• A select element is often accompanied with a visible text label above or next to it. If a menu dropdown has a visible label, it will appear in the toggle.

The select element’s toggle can display a success, warning, or danger status with helper text after an option is chosen.

The recommended maximum character counts are listed below and includes spaces.

When the user clicks the toggle, the list of options should appear directly below the toggle. The list remains open until an option is selected, the user clicks outside the list, or the user presses the Escape key. Upon selection, the chosen option replaces the previous text in the collapsed toggle.

The select element is a block-level element and will expand to the full width of its container by default. The width of the expanded options list should always match the width of the collapsed toggle.

Other than a potential change in its width, a select element will not change based on screen or container sizes.

Do use a select when users need to make a selection that remains visible once the element is collapsed.

Do not use a select for navigation or for actions that would require a menu dropdown.

Do include an accessible label for screen readers and a visible label when the select list’s content is not easily understood with context clues.

Do not omit an accessible label for screen readers. Avoid omitting a visible label if the select’s purpose is not clear and if it appears in form with other input fields.

Do include decorative icons or descriptions if they might help the user make a selection more easily.

Do not use decorative icons or descriptions if they do not include clarifying information or if they make the options harder to scan.