Select

Usage

A select field, also referred to as a dropdown, allows users to select single or multiple items from a list of available options. Consider dropdowns when the options exceed 8, or where it is not feasible to list all options as checkboxes or radio buttons. When using multislect, ensure you make it clear to the user that more than one option can be selected.

Do:

• use descriptive labels, state the intent of the action
• use helper text to give further guidance to the user
• specify errors inline, show the user where the error occurred and provide a reason

When to avoid

Don't use a select when there are fewer than 8 options or where there is benefit to the user seeing all available options up front. In these instances consider using checkboxes or radio buttons so all options are visible without additional clicking or scrolling.

How this component works

Helper text

Helper text provides users further guidance to make a selection. Use to provide additional context, information or as an example to complete a field input.

Error messages

Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.