Select boxes
 
Also known as drop-down lists.
 
 
 

Guidance


Avoid select boxes where you can
 
Select boxes should usually be avoided, for a number of reasons:
 
They hide the choices they represent. Users have to interact with the control before they know what they're being asked, which makes it harder to comprehend things at a glance.
 
They're hard for some people to use. Less experienced users can struggle to use these controls, especially if they contain a lot of options - either they don't know how to interact with them, or they're unaware that they can scroll through the list.
 
They can cause accessibility issues. On some devices the list of options cannot be zoomed, which means that some people with visual impairments cannot use them.
 

Alternatives to select boxes

 
Free text boxes
Sometimes it's better to just let users type their response as free text. 
 
 
Radio buttons or checkboxes
For shorter lists, consider using +radio buttons or checkboxes. Remember, long lists can sometimes be broken into multiple shorter lists by asking a few questions up-front to filter out options.
 
 
Autocomplete boxes
For long lists of known options (like countries) try using +autocomplete boxes.
 
Custom select boxes
Some of the usability issues of select boxes can be addressed by creating customised controls. These should always be tested very thoroughly though, especially for accessibility.
 
Below is an example from GOV.UK of a custom multi-select box:
 
 
 
The list of options expands into the page rather than over it, which means:
  • no content is obscured
  • users can scroll the list just by scrolling the page
  • users can click elsewhere on the page without closing the list
 
We're also able to control the styling to make it consistent with our other form controls, and we can add extra features, like the 'clear' link.
 
 

Examples on GOV.UK