Overview
The select component allows users to choose one response from a drop-down list. The user can only select one item with this component.
Select is often used on forms, like when asking which U.S. state the user lives in. It can also be used to choose an action, filter a list, or sort content.
Usage
When to use
Select is ideal when:
- You're building a form.
- You want a user to select a single option from a list of many, and to submit that data.
- There is a limited and defined list of valid answers.
- Each option is brief. A long list of wordy responses is harder to read and select from.
When not to use
- If the user should be able to select more than one response, use a checkbox group.
- If the list only contains one or two possible responses, use a radio button group.
Accessibility
- Always provide an accurate label for your select box.
- Assign a unique ID to any help text. Make sure the input has an aria-describedby attribute that matches this ID.