Overview
Selects act like other inputs. The user can click or tab into the input to open the options menu. Users should be able to use their keyboard to navigate the list by letter for quicker navigation.
Native OS behaviour
Compound uses the native OS select menu to handle dropdowns. This means:
- The select component's appearance and behaviour match the user's operating system
- Users experience familiar, expected interactions
- The component is accessible by default through native browser support
- Mobile devices display native pickers optimised for touch interaction
- No custom JavaScript is required for basic functionality
Dropdowns will be different of each browser OS
Keyboard interaction
Users can interact with select components using:
- Tab (⇥) - Move focus to the select component
- Enter or Space - Open the options menu
- Arrow keys (↑↓) - Navigate through options when the menu is open
- Letter keys - Jump to options starting with that letter
- Enter - Select the focused option and close the menu
- Escape - Close the menu without selecting
Validation
An example of how the validation for a select will be displayed
<label for="choose-location>Choose location</label>
<p id="helper-text">This can be different to where you went before.</p>
<p id="error-msg">Select a location</p>
<select aria-describedby="error-msg" id="choose-location>
<option value="east-midlands>East Midlands>
...
<option value="scotland'>Scotland</option>
</select>
Sample HTML code of the correct aria code