Skip to main content
Official government website
GovBB Design System
Menu

Select

Lets users choose one option from a long, familiar list.

Examples
HTML and React
Group
Form elements
On this page

Preview

Select with hint text
Open in new tab

options maps to <option> elements; <option> children work too when you need option groups or full control.

The Select component is a dropdown that lets users choose a single option from a long list, such as a parish or a country. It is a last resort for long lists: most questions are easier to answer with visible options.

Usage

When to use

  • Use a select for one choice from a familiar, predictable list when showing every option would crowd the page.
  • Use it for settings where a sensible current value is already known.

When not to use

  • Do not use a select for a short list when radio buttons let users compare choices directly.
  • Do not use it for multiple selection or a very long list users need to filter by typing.

Best practices

Do not preselect an answer to a question

Start with a prompt such as “Select a parish” when no answer has been given. Preselection is appropriate for an existing setting, but can bias a new answer.

Make options easy to predict

Use short, unique labels and order options alphabetically, numerically or by a clear domain convention. Keep a visible label and place validation feedback beside the select.

Guidance

Start the list with a non-selectable placeholder option, such as “Select a parish”, so users make an active choice rather than submitting a default value by accident.

Always pair a select with a visible <label>. Use hint text (.govbb-hint) beneath the label to explain what is being asked, and link it to the select with aria-describedby.

Errors

When a select fails validation, show an error message (.govbb-error-message) above the select with role="alert", and mark the select itself with aria-invalid="true" and aria-describedby pointing at the error message id. Keep error messages specific and actionable, such as “Select a parish”.

Select with error
Open in new tab

Disabled selects

Avoid disabling selects wherever possible. A disabled select gives the user no information about what they need to do to enable it, and its content is skipped by many screen readers. Prefer showing the value as read-only text, or explaining why the field is unavailable.

Disabled select
Open in new tab