Select (native)
HTML element that allows users to select one option from a dropdown menu.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: VPDS uses native HTML select elements. As a result, developers have a limited amount of control over how these elements appear and behave. The menu is styled by the browser and will differ between them.
- Ensure each select has an ID associating it with its label.
- Always show the full text of longer options in the expanded menu view. Only truncate text in the field after a selection is made.
- Be sure to associate additional text and error messages to the select or its fieldset. Reference the code for more.
Keyboard controls
| Key | Behavior |
|---|---|
| Home | Moves the focus to the first menu item. |
| End | Moves the focus to the last menu item. |
| Space | Expands the menu. |
| ↑ ↓ | Moves the focus and selection to the next menu item. Selects the next option when the menu is not expanded. |
| Enter | Opens the menu if the menu is closed. When the menu is open, selects/activates the menu item in focus and closes the menu. |
| Esc | Closes the menu, setting the focus back on the button or element the menu was activated from. If the focus or hover was set to a different menu item, closing the menu with Esc will not update the selection. |