Select

When to use select

Use the select component when users can only choose one option from a list.

Only use it if you have evidence that using radio buttons is not the best solution.

When not to use select

Do not use the select component if you can use radio buttons instead. While more space efficient than radio buttons, there are many issues with the select component.

If you need to list a lot of options, try asking users questions which will allow you to present them with fewer options. This can help you structure content so you can use radio buttons instead.

GOV.UK research shows that users can struggle with selects, particularly when users have:

• been unable to close the select
• tried to type into the select
• confused focused items with selected items
• tried to pinch zoom select options on smaller devices
• not understood that they can scroll down to see more items, or how to

If users need to be able to choose more than one option, use checkboxes instead.

How select works

When a user clicks on the select input it brings up the native browser dropdown. Once a user has selected an option from the list it is reflected in the select component.

<div class="p-form__form-group">
  <label class="p-form__label" for="select-standard">Label</label>
  <select name="select-standard" id="select-standard" class="p-form__select">
    <option value="">Choose an option</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</div>

Height and width

The height of the select input is fixed and can only show a single line of text.

The width is also fixed.

Text length restrictions

If text is too long to be displayed in a select input, then any overflow is hidden to make sure that the chevron icon is always visible.

Hint text

Select can display hint text. Use hint text when you need to help users understand the options and choose the most appropriate one.

Using hint text is optional.

<div class="p-form__form-group">
  <label class="p-form__label" for="select-hint">Label</label>
  <span class="p-form__hint">Hint text</span>
  <select name="select-hint" id="select-hint" class="p-form__select">
    <option value="">Choose an option</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</div>

How to write hint text

Keep hint text to a single short sentence, without any full stops.

Do not include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.

Error messages

Select can display an error message. It appears below the label or hint text. This creates a clear link between the error and:

• what is being asked
• any guidance on what information is required
• how to enter the information

Display an error message if the user has not selected an option.

Use ‘select’ at the beginning of the error message, for example, ‘Select a location’.

Only display error messages after a user submits the form or clicks to continue to the next step.

<div class="p-form__form-group">
  <label class="p-form__label" for="select-error">Label</label>
  <span class="p-form__hint">Hint text</span>
  <span class="p-form__error">Error message text</span>
  <select
    name="select-error"
    id="select-error"
    class="p-form__select p-form__input--error"
  >
    <option value="">Choose an option</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</div>

If your product is already handling errors in a different way

If you work in Parliament and need advice on presenting errors in this way, contact the Improving User Experience team on the #design-system Slack channel.

How to use select

Update the relevant fields

To create a clear and accessible relationship between the <label> and the input:

• you must use the <label> element to clearly associate text with the input
• the for attribute of the <label> must exactly match the id of the input
• the id used for the <label> must also be unique from other form elements on the page

Adjusting the width

You can adjust the width of the select input to best accommodate the length of the text you need to display.

Always include text in the default state

Always include text in the default state even if it means repeating the text in the <label>. If the select component has no text in it, then users may mistake it for a text input.

<div class="p-form__form-group">
  <label class="p-form__label" for="select-house">Choose a House</label>
  <select name="select-house" id="select-house" class="p-form__select">
    <option value="">Choose a House</option>
    <option value="option-both">Both</option>
    <option value="option-commons">House of Commons</option>
    <option value="option-lords">House of Lords</option>
  </select>
</div>

Preselecting an option

As standard, no option should be preselected in case it influences users’ answers.

However, in some instances it may make sense to preselect an option. For example, when letting users select a ‘sort by’ order you could preselect ‘Most recent’ as the default order.

<div class="p-form__form-group">
  <label class="p-form__label" for="select-preselected">Sort by</label>
  <select
    name="select-preselected"
    id="select-preselected"
    class="p-form__select"
  >
    <option value="option-ascending">Alphabetical (A to Z)</option>
    <option value="option-descending">Reverse alphabetical (Z to A)</option>
    <option value="option-recent" selected>Most recent</option>
    <option value="option-oldest">Oldest to newest</option>
  </select>
</div>

Do not use the disabled state attribute

Do not use the disabled state attribute as it can cause issues for users. Disabled inputs are often not distinguishable from active ones, and they do not tell users why they cannot interact with them.

Instead, allow users access to all inputs, even if that means that after trying to submit or continue with a form it fails. Use error messages to then help users understand what they need to do to fix the problem. Using error messages also follows best practice guidance for creating accessible interfaces.

If users must submit information in a specific order, consider using a multistep form.

Displaying previously submitted information

Do not use the disabled state to display previously submitted information. This can confuse users as they may not realise that they cannot change the information.

Instead, consider displaying the information as standard text.