Skip to main content
Coat of arms of Barbados
Official government website
GovBB Design System

Select

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

Preview

Select with hint text

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.

When to use this component

Use a select when there are more than about five options and the list is one users already know, such as a parish or a month. Selects work well when the options are long and predictable enough that hiding them behind a dropdown does not slow users down.

When not to use this component

Do not use a select for five or fewer options: radio buttons show every choice at once and are easier to scan and select. Do not use a select for data users would want to search for, such as a long list of countries, without also offering a typeahead. And do not use a select when more than one answer is allowed. Use checkboxes instead.

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

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