Vivid Logo Vivid

Searchable Select

Searchable Select allows users to select one or multiple items from a list of options. It provides a search input field to filter the options.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

  • If a label can not be used, always provide an aria-label as an alternative. This will allow screen reader users to know the purpose of the Searchable Select.
  • Never use placeholder text in place of a label or aria-label. The problem with placeholders
  • When using Options with slotted content (e.g. icons, badges) that should be accessible to screen readers, you must set aria-label on the Option to provide a text alternative for the entire Option. You cannot rely on the Browser's accessible name computation because Searchable Select bypasses it.