Select Component

A control for storing single-select or multi-select form data.

The select pattern is a form control. It allows _selection_ of one or more items from a list of options. Like all form controls, the value (or values) make up the form data that is passed to the server.

If you require similar behaviour, but without the need for form data, please consider the menu pattern instead. HTML already gives us a native select control that is 100% accessible. However, it is difficult to style and it's options do not support inner HTML.

Do not call a select a "dropdown"! The term "dropdown" is ambiguous and could be confused with a menu, combobox, listbox or any other kind of overlay that "drops down".

Terminology

We use the following terminology when discussing this pattern.

  • select : the pattern as a whole, comprised of the following sub parts
  • label : the labelling element or text for the control
  • flyout : contains the full view of options
  • options : each option available for selection
  • multiple : boolean, indicating if multi-select is allowed