Components
Select
Select allows users to choose an option from a list.
What you need to check
The field must have a visible label.
Screen readers must present the label, description, and error messages when the field receives focus.
You can use Field to connect the label, description, and error messages.
The field must have a clear accessible name that matches the visible label.
The accessible name must contain the visible text that describes the field. This allows users of speech recognition and screen readers to refer to the field using the same name shown on screen.
Required fields must be clearly marked.
Users must easily understand which fields must be filled in. Follow the pattern for required and optional form fields.
Error messages must be clearly linked to the correct field and explain how to fix the error.
The error message must make it clear which field contains an error, what is wrong, and how the user can fix it. Avoid generic messages such as “Error” or “Invalid value”. Use specific messages instead, for example “The email address must contain @”.
See the pattern for user-triggered error messages for recommendations on when and how error messages should be shown.
WCAG: 3.3.1 Error Identification (W3C) and 3.3.3 Error Suggestion (W3C)
The first option must not be used instead of a label or to show important information.
After users have made a choice, they must still be able to understand the context the choice belongs to. Give the field a clear label, for example “Select country”, and use a description for additional guidance if needed.
Use the correct autocomplete value when the field concerns the user themselves.
The correct autocomplete makes it easier to fill in forms and is required for fields that concern the user’s own personal information. See Purpose of input for when and how to use it.
Do not use a disabled state
Avoid using the disabled (disabled) state. Consider instead whether you need to show the field at all, or whether you can present the information as plain text or use readOnly.
Test with a Keyboard
Verify that you can
- reach the select using Tab
- open the list using Space on macOS
- open the list using Enter on Windows
- navigate between and highlight options using ↓ and ↑
- select an option using either Enter or Space
- move to the first option in the list using Home
- move to the last option in the list using End
- jump to the first option that starts with a typed character
- close the list using Escape