Select

The select component (sometimes called a dropdown list) allows users to choose a single item from a collapsible list of options.

Example

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.

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.