# Select

Chooses one plain option through the device's own list when radio buttons would take too much room.

* Kind: component
* Page: https://design.werklist.com/components/select
* Version: 2.1.2

## When to use it

* Plain options in a form, such as a contract type or a notice period, when there are more than five or no room to show them as radio buttons

## When not to use it

* Up to five options with room to show them: radio buttons
* On or off: a switch
* A long list people search by name, or options with flags, photos or hints: a combobox
* Choosing several options

## Anatomy

* Control: the device's own select, drawn with the fill, corner radius and padding of the text field (--input-border)
* Chevron: 16 px, 12 px from the end (--text-muted)
* Padding at the end: 36 px
* List: the operating system's own, a menu on a computer and a picker on a phone, in the theme of the page

## Sizes

* md: height 44 px
* lg: height 48 px

## States

* Rest, focus, error, disabled: As the text field, with no hover state (--input-border, --brand-blue, --error, --text-muted)
* No answer yet: An empty first option asks the question, such as Choose a notice period, and counts as no answer for a required field

## Keyboard

* Arrow keys: Move through the options
* A letter: Jumps to the first option that starts with it
* Enter, Space or Alt+Down: Open the list, where the platform does so

## Accessibility

* A select element, named by the Field label
* The open list follows the theme of the page
* Options can be grouped, and one option can be disabled

## Content

* Options are parallel phrases in sentence case
* Add None when no option may apply
* The empty first option asks the question

## Tokens

* --glass-fill-input
* --input-border
* --brand-blue
* --text-muted
* --radius-lg