If a select has seven or more options to select from, it should include a typeahead search at the top of the dropdown menu. When the input is clicked, the search should be auto-focused by default, so that the user can begin typing to filter the available options.
Include a placeholder to help indicate the items that the input is indexing
Always include the clear control within the input
If search is done async, include the loading indicator to the far right of the input
Don't
Modify the styles or icons within the search input
Adjust the structure of the placeholder content
Include a ... after the placeholder
Content
Default placeholder format should be: Search {{item}}s
Placeholder can also include additional meta data that the search can filter by: Search {{items}} by {{metadata1}} or {metadata2}
Example: Search campaigns by name or ID
or
Search users by name, email, or ID
Accessibility
Keyboard Navigation: Ensure text fields are navigable with the keyboard, following logical tab orders.
Screen Reader Support: Use label tags and ARIA attributes to describe each field's purpose, ensuring screen readers can accurately convey this information to marketers.
Contrast and Visibility: Adhere to WCAG guidelines for text and background contrast, ensuring text fields and their components are easily distinguishable and legible.
Error Identification: Provide accessible error identification, using both color and text descriptions to signify and explain errors.
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova