Allows users to select one option from a predefined list
Examples
Usage
Research shows some users find single selects clunky and hard to use. It’s generally best to consider other input options first. Single selects are often overused in Turas forms. Before choosing a component that allows user to make a selection, think about whether a different component would be more user-friendly.
Do:
match the select width to the length of the longest option rather than stretching it to other fields' widths
consider alternative form components like radio buttons for better usability
use a text box with autocomplete if users likely know what they're searching for
use a single select for 5 to 15 options
include a clear, descriptive label beside the single select using the <label> tag
use short, descriptive option labels
provide an instructive placeholder inside the single select, e.g. 'Select NHS Board' rather than '--Please select--'
sort options from the user's perspective, usually alphabetically or numerically, unless another pattern suits better
support keyboard input to select visible options or jump to options starting with a typed letter
use single select when the default option is recommended
group related options with a distinct hierarchy using the <optgroup> tag for easier scanning but don't rely on it for critical info as screen readers may ignore it
Avoid:
using a single select for lists with more than 15 options, instead reduce the number of options or use a text input, autocomplete, or a multi select
using a single select with four or fewer options, instead use stacked radio buttons instead
choosing a single select for data that is highly familiar to users, such as a date of birth
adding functionality to allow the user to select multiple options
starting with a default selection unless at least 80-90% of users are likely to select that value
when you want to emphasise options that have no clear default or recommended value, or when options are unfamiliar and require careful reading
when the user needs to view a clear comparison of their options
using select for navigation unless a form submit button is positioned next to it