Select

A form field that allows the selection of one or more items from a predefined list of options.

Keyboard navigation

When a user tabs to a select, the following behavior is expected:

1. Activate the focus state by clicking, tapping or tabbing to the input.

1. Activate the focus state by clicking, tapping or tabbing to the input.

2. Press “return” to open the dropdown

2. Press “return” to open the dropdown

- Search: Yes > cursor appears in the input (see below)
- Search: No > focus on the first option in the list

3. Use the arrow keys to cycle through the list, top to bottom.

3. Use the arrow keys to cycle through the list, top to bottom.

Note: it the user types a letter, they should be taken to the next menu option that starts with that letter.

4. Press “return” to select and / or de-select options from the dropdown list.

4. Press “return” to select and / or de-select options from the dropdown list.

5. Press “tab” to close the dropdown list and move on to the next interactive control

5. Press “tab” to close the dropdown list and move on to the next interactive control