Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
Kit part · Selects
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.
- Element
- <select>
- Needs
- kit.css
- Rules
- field.rules.md · 5
- Finishes
- Aluminium · Graphite · Oak · Walnut · Porcelain · Black · Daylight · Night · Paper · Phosphor · E-paper · AMOLED
- Volumes
- Tactile · Quiet
Seats open in 11 days. Want one email that morning?
Variants
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Rest | Focus | Chosen | Error |
|---|---|---|---|---|
| Select |
Graphite
| Part | Rest | Focus | Chosen | Error |
|---|---|---|---|---|
| Select |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-select | class | on <select> | The field recess, with a printed chevron and 34px kept clear on the right. |
| .tui-field | class | on <label> | 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
<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>Needs kit.css only, no script. How to install the kit.
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 or a 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
field.rules.mdIn the brain
The label is printed above; an error carries a hint that says what to do.
5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.
