Show code Hide code
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 multi-select, ensure you make it clear to the user that more than one option can be selected.
- 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
- 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.
Maximum dropdown height
By default, the multi-select dropdown calculates its maximum height from the available viewport space above or below the select field. For long option lists, add the data-multi-select-max-height attribute to the multi-select wrapper element with js-multi-select to set an upper limit (number from 1 to 100, applied as vh).
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.