Vivid Logo Vivid

Select

Select lets users choose one option from an options menu. Consider using select when you have 4 or more options to choose from.

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 alertnative. This will allow screen reader users to know the purpose of the Select.
  • Never use placeholder text in place of a label or aria-label.
    The problem with placeholders

Resources

Select: Manual accessibility test