The select component (sometimes called a dropdown list) allows users to choose a single item from a collapsible list of options.
Interact with this example to see how it works.
When to use it
Only use a select component if you have no other option, because research shows many users have difficulty choosing items from dropdown lists. Also, select components are implemented differently on various devices, and can be especially problematic on mobiles. Watch a video about how some users struggle with select components.
Consider using radio buttons or checkboxes instead of a select dropdown.
How it works
The select component allows users to choose an option from a list, usually more than 6 and fewer than 15 options.
Before deciding to use a select component, do some research with users to find out if fewer options are feasible. If you can reduce the list to 6 items or fewer, use radio buttons instead.
Guidance, original HTML and CSS derived from GOV.UK Design System.
Get in touch
If you’ve got a question, idea, or suggestion, email the Design System (DS) team at email@example.com, use our AOG-DS Slack app, or discuss Select on 'GitHub issues'.