Select

Select and Multiselect components allow users to choose one or more values from a pre-defined list of options.

What the component handles

  • Associated helper message and error message announced by screen readers in a correct order
  • Required attribute announced by the screen readers
  • Keyboard navigation including the dropdown footer
  • Proper combobox semantics (role="combobox", aria-expanded, aria-haspopup)

What you need to provide

  • aria-labelledby if you’re referencing an existing label element

Color contrast

Meets the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:

  • background.static.xxx tokens except for background.static.inverse and background.static.on-color
  • in default Card variant.