Select

When to use

• Use select when users need to choose one option from a predefined list that is too long for radio buttons to be practical

When not to use

• If users are choosing from fewer than five options and all options can be shown at once, use radio buttons instead. Radio buttons make all choices visible without an extra interaction

Content guidance

• Keep labels short and descriptive. The label should make it clear what the user is choosing e,g. Country, instead of Please select your country of residence
• Use hint text to clarify what kind of option the user should expect, or to give additional context the label alone does not cover. If the label is self-explanatory, leave hint text out

How it works

The options list uses the browser's native dropdown, not a custom designed menu. The visual appearance of the open dropdown will vary across browsers and devices.

Accessibility

This component is designed with accessibility built in:

• Colour contrast meets 4.5:1 across all states including error
• The select trigger is keyboard operable and the native dropdown inherits browser keyboard support

When implementing, verify:

• Each select has a visible, associated label
• Error messages clearly describe what went wrong and how to fix it
• If hint text is present, it is programmatically associated with the select using aria-describedby

Resources

• Figma
• Storybook