Input group
An input with a leading glyph and a trailing cell on the same rule.
States
-
Rest
nothing set
A muted glyph, the text, and the cell’s tissue ring on one ink rule.
-
Focused
:focus
The rule develops in --state under the whole group.
-
Action hot
hover on the cell
The cell fills --state and fires, like any icon cell.
-
Disabled
disabled
A hairline, muted text, and the cell’s ring at half strength.
Anatomy
| Height | 40px (--control) |
|---|---|
| Leading glyph | 12px pixel glyph in --muted-foreground; it labels, it does not act |
| Trailing cell | an icon cell (32px): the action, at the rule’s end |
| Gaps | half a module between glyph, text and cell |
| Focus | the field’s --state rule develops from the press |
| Action | the cell fires once (280ms) and the rule only develops: one interaction, one flare |
The flare’s length is read from the engine at build time (rule.ts).
Decisions
-
The action is a cell
The trailing control is the same icon cell as every compact control, so it rings, fires and breathes the same way.
-
One interaction, one flare
Focusing the field from its cell lets the cell fire and the rule only develop, as on the site’s contact rows and link-out headings, where labelled controls used to fire twice.
-
The glyph only labels
The leading glyph is muted and has no cell: it says what the field is for, and nothing happens when you press it.