Components
Suggestion
Suggestion is a searchable "select" with support for multiple selections.
What you need to check
The field must have a visible label.
Screen readers must present the label, description, and error messages when the field receives focus.
You can use Field to connect the label, description, and error messages.
The field must have a clear accessible name that matches the visible label.
The accessible name must contain the visible text that describes the field. This allows users of speech recognition and screen readers to refer to the field using the same name shown on screen.
Required fields must be clearly marked.
Users must easily understand which fields must be filled in. Follow the pattern for required and optional form fields.
Error messages must be clearly linked to the correct field and explain how to fix the error.
The error message must make it clear which field contains an error, what is wrong, and how the user can fix it. Avoid generic messages such as “Error” or “Invalid value”. Use specific messages instead, for example “The email address must contain @”.
See the pattern for user-triggered error messages for recommendations on when and how error messages should be shown.
WCAG: 3.3.1 Error Identification (W3C) and 3.3.3 Error Suggestion (W3C)
Placeholder must not be used as the only label or for important information.
Placeholder text disappears when the user starts typing and is not always read out by assistive technologies. Use it only as an example of the expected content or format – see Avoid placeholder text.
Use the correct autocomplete value when the field concerns the user themselves.
The correct autocomplete makes it easier to fill in forms and is required for fields that concern the user’s own personal information. See Purpose of input for when and how to use it.
Test with a Keyboard
For single selection, verify that you can
- reach the suggestion field using Tab
- enter text without using a mouse
- display suggestions when the criteria for suggestions are met
- navigate between suggestions using the arrow keys
- select a suggestion using Enter
- close the suggestion list using Escape
- continue typing after navigating through suggestions
- identify which suggestion is highlighted
For multiple selection, verify that you can do all of the above, and also
- select a suggestion using Enter without removing previous selections
- remove a selected value using Enter without removing other selections
- verify that the visual chips representing selected values match the selected values in the list