# Select

Status: stable

Choose one option from a list of more than about five.

Selects let managers choose one option from a list. They save space when there are more than about five options. With five or fewer, radios are better because every option is visible without a click.

Atrium uses the browser's own select, so the dropdown list and its arrow look a little different in each browser and on phones. That is expected.

## Example

```html
<div class="at-field"><label class="at-label" for="d-freq">Reminder frequency</label><select class="at-select" id="d-freq"><option>Weekly</option><option selected>Monthly</option><option>Quarterly</option></select></div>
```

## Anatomy

1. **Label**: font-size: var(--at-text-sm) /* 14px */; font-weight: var(--at-weight-bold)

2. **Field**: min-height: 36px; padding: var(--at-space-3) /* 8px */; border: 1px solid var(--at-border); border-radius: var(--at-radius-1); arrow: drawn by the browser

## Size and spacing

- **Field**: min-height: 36px; width: 100% of its container

- **Type**: font-size: var(--at-text-md) /* 16px */

## Variants

### Select

Put the most common option first, or pre-select it if there is a sensible default.

```html
<div class="at-field"><label class="at-label" for="v-prop">Property</label><select class="at-select" id="v-prop"><option>22 Ashby Road</option><option>9 Mill Lane</option><option>14 Park View</option></select></div>
```

| State | Specification |

|---|---|

| Default | border: 1px solid var(--at-border) |

| Hover | border-color: var(--at-text-subtle) |

| Focus | outline: 3px solid var(--at-border-focus); outline-offset: 2px |

| Error | border: 2px solid var(--at-border-danger); plus an .at-error message |

| Disabled | opacity: 0.5; cursor: not-allowed |

## When to use

- Choosing one option from more than about five.

## When not to use

- Five or fewer options: use radios.
- Choosing several: use checkboxes.
- Hundreds of options: use a text input with search.

## Content

- Options in a sensible order: most common first, or alphabetical, or by date.
- Keep option text short so it fits on a phone.

## Do and don't

Do: Two options: show them as radios.

```html
<fieldset class="at-fieldset"><legend>Charge</legend><label class="at-choice"><input type="radio" name="dd-s1" checked /> Flat fee</label><label class="at-choice"><input type="radio" name="dd-s1" /> Per unit</label></fieldset>
```

Don't: A select that hides only two options.

```html
<div class="at-field"><label class="at-label" for="dd-s2">Charge</label><select class="at-select" id="dd-s2"><option>Flat fee</option><option>Per unit</option></select></div>
```

## Do

- Keep the native select element.

## Don't

- Build a custom dropdown.

## Code

```html
<div class="at-field">
  <label class="at-label" for="freq">Reminder frequency</label>
  <select class="at-select" id="freq">
    <option>Weekly</option>
    <option>Monthly</option>
    <option>Quarterly</option>
  </select>
</div>
```

## Classes

| Class | What it does |

|---|---|

| `at-select` | Native select, styled |

## Tokens

`--at-border`, `--at-surface`, `--at-text`, `--at-border-bold`

## Accessibility

- Native selects work with keyboards and screen readers out of the box.