Selects

The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.

The select component allows users to choose an option from a long list. Before using the select component, try asking users questions which will allow you to present them with fewer options.

Asking questions means you’re less likely to need to use the select component, and can consider using a different solution, such as radios.

Select with header as a Label

If you’re asking just one question per page as recommended, you can set the contents of the label as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

What would you like to select?

Que voudriez-vous sélectionner?

Typeahead searchable dropdown

As a general practice searchable dropdowns are used when there are a lot of dropdown options or the options are categorized.

Another thing to consider is the context of the user, typeahead in dropdown menus are good if the user knows what he is searching for. It makes it easier to search and select the Option required.

Type something to narrow down options

Tapez quelque chose pour affiner les options

Typeahead searchable dropdown with errors

What would you like to select?

Select an option

Que voudriez-vous sélectionner ?

Sélectionner une option.