Select

Usage

The select component allows users to choose one item from a menu of options. It is generally used in forms to submit data.

Best practices

Do

Use select to let a user choose a single item from an options menu.

Don't

In a form, do not use select if you have fewer than 2-3 options. Consider using the radio component instead if you have enough space.

Do

Sort the menu of options based on the frequency of use. In a form, alternative sorts such as alphabetical may be more fitting.

Labels

Labels indicate what type of data the field needs. Having labels present gives us two major advantages:

• They are programmatically associated with the field, which means assistive technologies will read them when the user focuses on them.
• When the user click/tap on the label, the browser passes the focus to the field, which makes it easier for touch screens, and users with motor disabilities.

Important note

Labels should always be present, unless for those cases where the context and elements that surround the select make it clear what the purpose is (e.g. sorting or filtering). In those cases, make sure an ariaLabel is used.

Do

Use labels to describe what the data in the select field is all about.

Don't

Do not place a label within the select component, labels must always be above the select field.

Placeholders

Use placeholders in select fields to let the user know the action that they need to perform (generally: “Select an option”). They can never be a substitute for the label or hint because they do not meet a strong contrast ratio.

Do

Use a placeholder whenever there’s no logical default option to pre-select.

Don't

Do not leave the select field empty. Have a default option pre-selected whenever possible, or a placeholder instead.

Hint & errors

Hints and error messages provide additional directions to support the label meaning in an accessible manner.

Do

Use hints to provide useful information about the required select field.

Don't

Do not duplicate information, if an error message is repeating the hint, hide the hint.

Examples

Live Preview

Props

Events