Select input

The select component allows a user to pick an option from a list.

Anatomy

The select input consists of the following elements:

The radio button component can have the following states:

Use the Select input component when users need to:

Avoid using a Select input component when:

There is a short list of options available for selection: use a Radio button component instead.
Where there is a long list of options available for selection: consider if there are questions you could ask the user which would allow you to reduce the number of options needed.

Labels: Always provide a visible label above the Select input. Use sentence case and make it clear what data is expected.
Help text: Use help text below the label to add additional context where needed. (e.g. to help users understand the options available.)
Preselection: If you are using the select component to ask a user a question, do not preselect any of the options. If you are not asking the user a direct question, for example a settings change, you can preselect an option as a default response.
Selection: Users can click on the expand-more chevron to display a list of mutually exclusive items. Users can then select only one of the options provided.

Error messages appear below the Select input when validation fails.
Error messages must:
- Be clear, concise and written in plain English.
- Explain what went wrong and how to fix it.
Avoid vague messages such as ‘An error occurred’. An error for a specific situation is more helpful.
Do not apologise. It does not help the user resolve the problem.
Frequency of errors should be tracked to help with testing and research.
Focus state must be clearly visible.
Disabled Select inputs:
- Indicate that the field exists, but is unavailable.
- Should display a "not-allowed" cursor on hover.
Required fields must be clearly indicated using text (e.g “Required”) or an asterisk with supporting context.
- Do not rely on colour alone to show required or error states.

The Select input has optional help text:

Use the help text to:

Help text should:

Write labels that are short, clear, and descriptive (e.g. “Select the state you currently reside in”).
Use sentence case without punctuation.
Provide help text separately if needed (not as placeholder).
Avoid jargon or ambiguous terms.

Accessible Select input fields must:

Always use a visible label for each input.
Do not use placeholder text as a substitute for labels.
Provide additional instructions using <aria-describedby> when necessary.
Required fields must be communicated to all users:
- Visual: Clear text indicator (e.g “Required or asterisk”).
- Programmatic: <aria-required="true">.
Ensure sufficient colour contrast for text and borders.
Select inputs must be operable via keyboard and have visible focus indicators.

1.3.1 Info and Relationships (Level A)
Labels programmatically associated with inputs.
1.4.3 Contrast (Minimum) (Level AA):
Text and borders meet contrast requirements.
2.1.1 Keyboard (Level A):
Fully operable via keyboard.
2.4.6 Headings and Labels (AA):
Labels describe purpose clearly.
3.3.2 Labels or Instructions (A):
Provide clear instructions for input and indicate required fields before submission.