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.
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: Use the first <option> element as a prompt like "Please select an option" to guide users. 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.
Group Options with <optgroup>: For long lists, group related <option>s under <optgroup> labels to make navigation easier for users, including those using assistive technologies.
Ensure Keyboard Navigability: <select> elements are inherently keyboard-friendly, but ensure any custom styling or scripting does not interfere with keyboard navigation.
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.
Example
<select>
Select with label