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 designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Ensuring compliance through usage

Redundant entry

To ensure WCAG 2.2 AA compliance for a select component, it's essential to retain selected options if users revisit the form or make changes to other fields. This reduces redundant actions, allowing users to pick up where they left off. Ensure that users can adjust their selections without affecting other fields, supporting smooth navigation and a streamlined form experience.

Consistent help

For a seamless, accessible experience with the select component, focus on clear labelling and purpose-driven design, especially when combined with other inputs. Arrange options logically and in alignment with user needs to reduce cognitive load. If users are likely to revisit or adjust selections, aim to maintain their choices to prevent unnecessary re-selection. A consistently configured select component improves user interaction, supporting both accessibility and usability throughout the interface.

Following these practices supports a more inclusive, accessible experience in forms and flows, meeting compliance requirements effectively.