About

A Select is a compact way of displaying multiple pre-defined choices. A Select consists of a Select field and a Listbox, and can appear in two different modes: collapsed or expanded.

Anatomy

A Select component consists of a Select field (3) and a Listbox (5), including the following mandatory and optional elements:

1. Label
2. Hint text (optional)
3. Select field
4. Leading icon (optional)
5. Listbox
6. Item descriptions
7. Indicator (optional)
8. Border
9. Selected item description
10. Help icon (optional)
11. Icon
12. Scrollbar (optional)

When to use a Select

A Select should be used when there’s limited space to show more than 7 pre-define options. A Select is often used in a form.

When not to use a Select

• When there are less than 7 options users need to choose from. Consider a Radio button or Checkbox instead;
• When there are no pre-defined options and users should be able to type. Consider an Input instead.

Behaviour

Default trailing icon
The default trailing icon is the ‘angle down’. Whenever the Listbox is expanded, this icon turns into ‘angle up’.

Scrollbar
Whenever there are more Select items than can be shown in the listbox, a scrollbar should appear indicating to users there are more items to choose from.

Keyboard behaviour

Keyboard behaviour follows the pattern of the combobox documented by on www.w3.org: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

Nesting components

A Select can use:

• Icon component

A Select can be used in:

• Forms pattern

Resources

• https://www.w3.org/WAI/ARIA/apg/patterns/combobox/