Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
Kit part · Forms · Inputs · Search bars · Selects
Combo
One field with its one action in a shared well: subscribe, search, add.
- Element
- <input> + <button>
- 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 | Error |
|---|---|---|---|
| Combo | Add the domain. |
Graphite
| Part | Rest | Focus | Error |
|---|---|---|---|
| Combo | Add the domain. |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-combo | class | — | One well, 4px inside, holding an input and a key. |
| .tui-input | class | inside | Loses its own recess and sits flush in the shared well. |
| .tui-key | class | inside | 36px, to fit the well. Plain or --primary. |
| data-error | attribute | on a .tui-field around it | Red hairline on the whole well. |
| Enter | keyboard | — | Put it in a <form> and Enter submits, as native. |
Markup
<div class="tui-field">
<label class="tui-label" for="sub">Subscribe</label>
<div class="tui-combo">
<input class="tui-input" id="sub" type="email" placeholder="[email protected]">
<button class="tui-key tui-key--primary">Subscribe</button>
</div>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- The input still needs its own name: a
<label for>oraria-label. - Put it in a
<form>so Enter works and the key is a real submit. - Focus rings the whole well through
:has(:focus-visible).
How it’s built
A flex row with the kit’s recess on the wrapper. The input inside drops its own shadow and background, so the cut reads as one; the key keeps its skirt and sits on the well’s floor. The ring uses :has(), so no script.
Rules
field.rules.mdIn the brain
One field and its one action; the action may be the contrast key.
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.