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.
Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- Element
- <input>
- Needs
- kit.css
- Rules
- field.rules.md · 5
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
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 | Filled | Error |
|---|---|---|---|---|
| Input |
Graphite
| Part | Rest | Focus | Filled | Error |
|---|---|---|---|---|
| Input |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-field | class | on <label> | A column: printed label, the control, an optional hint, 6px apart. |
| .tui-input | class | on <input> | The recess: 38px tall, well fill, the inset light. |
| .tui-hint | class | — | A line under the field. Red when the field has an error. |
| data-error | attribute | on .tui-field | A red hairline on the lip around the cut, and a red hint. |
| aria-invalid · aria-describedby | attribute | — | Set both with an error so the hint is read with the field. |
| placeholder | attribute | an example | Printed in --tui-ink-3. Never the only label. |
| .is-focus | class | — | Forced focus ring, for specimens. |
Markup
<label class="tui-field">
<span class="tui-label">Project</span>
<input class="tui-input" value="Harbour survey">
</label>
<label class="tui-field" data-error>
<span class="tui-label">Email</span>
<input class="tui-input" type="email" value="studio@"
aria-invalid="true" aria-describedby="email-hint">
<span class="tui-hint" id="email-hint">Add the part after the @, e.g. [email protected].</span>
</label>Needs kit.css only, no script. How to install the kit.
Accessibility
- Wrap the label and the control in
<label class="tui-field">, or useforandid. - Errors:
aria-invalid="true"plusaria-describedbypointing at the hint, and the hint says what to do. - Placeholder text is 3.4:1 or better: fine for an example, not for anything that must be read.
How it’s built
A native input with appearance: none, in the recess every well in the kit uses: a floor that darkens toward its upper wall, an inset shadow under that wall, and a lit lower lip. The error hairline is drawn on the lip, outside the cut, so the upper wall’s shadow cannot hide it.
Rules
field.rules.mdIn the brain
Placeholders show an example of what to type; the label is always printed. An error tells people how to put it right.
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.