# Select

A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.

Kit part · Free · https://tactileui.dev/parts/select

- Element: `<select>`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Selects
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Default

```html
<label class="tui-field" style="width:200px"><span class="tui-label">Sample rate</span><select class="tui-select"><option>48 kHz</option><option>96 kHz</option></select></label>
```

### With an error

```html
<label class="tui-field" data-error style="width:200px"><span class="tui-label">Output</span><select class="tui-select" aria-invalid="true" aria-describedby="v-sel-e"><option>Choose one</option></select><span class="tui-hint" id="v-sel-e">Pick where the mix goes.</span></label>
```

## Every state

- Rest
- Focus
- Chosen
- Error

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-select | class | on | The field recess, with a printed chevron and 34px kept clear on the right. |
| .tui-field | class | on | The printed label above, the hint below. |
| data-error | attribute | on .tui-field | Red hairline and red hint. |
| change | event | — | Native. |
| Arrows · Space · type-ahead | keyboard | — | Native select behaviour. |

## Markup

```html
<label class="tui-field">
  <span class="tui-label">Sample rate</span>
  <select class="tui-select">
    <option>44.1 kHz</option>
    <option selected>48 kHz</option>
    <option>96 kHz</option>
  </select>
</label>
```

## Usage notes

Open it: the list is the browser’s own, so it works with every keyboard and screen reader.

## Accessibility

- A native select: the open list, type-ahead and the announcements belong to the browser and the system.
- Two to five options read better as a [radio group](https://tactileui.dev/parts/radio) or a [selector](https://tactileui.dev/parts/selector); more than five, a select.
- Keyboard: Tab focuses it, and the arrow keys or typing the first letters of an option change the choice. How the list opens is the system’s own.

## How it’s built

A native `<select>` with `appearance: none` in the field’s recess. The chevron is two 5px triangles drawn by linear gradients in `--tui-ink-2`. The open menu is not restyled: it stays the platform’s.

## Rules

The label is printed above; an error carries a hint that says what to do.

The full rules are in `field.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Radio](https://tactileui.dev/parts/radio): One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.
- [Selector](https://tactileui.dev/parts/selector): One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.