Select

The select component allows users to choose one item from a menu of options. It is generally used in forms to submit data.

Healthy

Show details

This article is about simple single selection in forms. For multi-selection/single-selection with rich content in forms see Combobox. For filtering data see Filter. For selection that invokes instant change in the interface see Dropdown Menu.

Anatomy

Label: (Optional) Descriptive text that helps users understand what information to enter in to the field.

Select field: The control that displays the chosen value and opens a list of options on interaction.

Hint: (Optional) Supplementary text shown below the field to guide input or set expectations.

Error: (Optional) Feedback shown when the input is invalid; should be specific and actionable.

Usage Guidelines

When to use this component

For single-selection in forms that doesn’t require rich content

When not to use this component

For filtering data. Use Filter instead.

For changing a setting or selecting an action that instantly changes interface. Use Dropdown Menu instead.

For selection that requires rich content, or multi-selection. Use Combobox instead.

Best Practices

Sort the menu of options based on the frequency of use. In a form, alternative sorts such as alphabetical may be more fitting.

Don't

In a form, do not use select if you have fewer than 2-3 options. Consider using the Radio buttons instead if you have enough space.

Use labels to describe what the data in the select field is all about.

Don't

Do not place a label within the select component, labels must always be above the select field.

Use a placeholder whenever there's no logical default option to pre-select.

Don't

Do not leave the select field empty. Have a default option pre-selected whenever possible, or a placeholder instead.

Use hints to provide useful information about the required select field.

Don't

Do not duplicate information, if an error message is repeating the hint, hide the hint.

General Component Behaviors

Select component uses a native behavior provided by browsers and operating systems. It might differ between platforms and browsers

Labels

Labels indicate what type of data the field needs. Having labels present gives us two major advantages:

They are programmatically associated with the field, which means assistive technologies will read them when the user focuses on them.

When the user click/tap on the label, the browser passes the focus to the field, which makes it easier for touch screens, and users with motor disabilities.

Overflow

If value of the Select is too long to display fully in the select field, it will truncate.

Responsive Behavior

Select component uses a native behavior provided by browsers and operating systems. It might differ between platforms and browsers

Select adapts it’s size and elements to accommodate for larger tap targets improve legibility on mobile devices.

States

Content Guidelines

Use a clear, descriptive label e.g. “Select the service” instead of “Pick one.”

Keep option text plain, single-line, and consistently formatted. Use sentence-case.

Order options by user expectation (frequency, alphabet, or logical grouping

Keep helper/error text brief, clear, and specific to the field, e.g. “Choose one service per booking” or “This field is required.”

Front-load key words so options are scannable, e.g. “MRI scan – knee” instead of “Scan of the knee using MRI.””

For further information, see the Content Styleguide.

Known Gaps

Please let the team know if there is a need to prioritize any of the below gaps.