Select
Description
The select component allows users to choose one option from a dropdown list, providing a compact and intuitive way to present multiple choices.
If it comes with a label, this is usually above the select and has our label formatting.
Use Cases
- Use select fields sparingly and only for limited predefined choices, while allowing text input for more complex responses.
- Use when: There are five or more options, and space is limited.
- Avoid when: There are fewer than five options – use radio buttons or the state switcher instead.
Usage
Use Clear Labeling: Every <select> element should have a corresponding <label> that describes its purpose clearly. This is crucial for screen reader users to understand what selection they are making.
First Option as Instruction: If users must select something, show a default option or a placeholder. Use the first <option> element as a prompt like "Please select an option" to guide users if selection is optional. This option can be made non-selectable by setting its disabled and selected attributes. Especially in those rare cases, you can't have a label, this text should be clear and descriptive. Avoid using a placeholder if it’s unnecessary.
Labels: When using select fields keep the label in view when the select field is open.
Contents: Avoid having too many unneeded options in select fields. Keep options concise and meaningful. For long lists, group related <option>s under <optgroup> labels to make navigation easier for users, including those using assistive technologies. Allow a "None" or "Other" option if the choices may not cover all users.
Order: Alphabetical order for things like country names. Logical grouping e.g., "Small, Medium, Large" instead of a random order. Most common choices first for faster selection. Use standard HTML <select> elements to allow users to type and search through options—this is especially helpful when dealing with long lists.
Ensure Keyboard Navigability: <select> elements are inherently keyboard-friendly, but ensure any custom styling or scripting does not interfere with keyboard navigation. Users should Tab to focus, use Arrow keys to navigate, and Enter to select.
Visible Focus Indicators: Custom styles for focus states should be clearly visible, aiding users navigating via keyboard in identifying the focused element.
Contrast and Visibility: Ensure that the <select> element, including its options, meets the minimum contrast ratios for text against its background to aid users with visual impairments.
Avoid Using Only Color to Convey Information: If using color to highlight selections or groupings, also use text labels or patterns, as color alone may not be distinguishable by everyone.
Provide Accessible Feedback: On selection, provide accessible feedback, especially if the selection triggers a change in content or context. Use ARIA live regions to announce updates if necessary.
Cascading Select Fields:If one select field affects another (e.g., Country → State/Province), dynamically load relevant options. Ensure the second select field is disabled until the first is selected.
Example
<select>
Select with label