- Contents:
Selection dropdowns:
- Allow users to select a single option from a list
- Declutter UI by keeping options collapsed
- Leave more space than do columns of checkboxes
Guidelines
- Allow a single selection from a dropdown list.
- To allow multiple selections, use an accordion and/or a set of checkboxes.
- iOS and Android app should follow Picker component from their system guidelines.
- Use predictable and logically ordered values.
- Offer a neutral option (e.g. “None,” “Not applicable”) if applicable.
Accessibility
- Make sure your dropdown has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).
- Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.
See also
Further Reading
Related elements
Related components
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|---|---|
| Jul. 26 2019 3:43pm | Merged the Dropdown sketch UI kit into the Form Element file so they share the same file and link. | |
| May. 08 2017 4:51pm | Initial content entry |