Forms · the rest of the field anatomy states.html didn't have room for
Input
01
Text entry — the rest of the set
living-styleguide-states.html already shows one input's default, focus, error, and valid states. What it didn't have room for: disabled, and the multi-line sibling. Same rules, same tokens — --focus for the ring, --fail for wrong, --pass for right.
Locked while the agent is running.
✕ That's too short to be a real prompt.
Text entry
Disabled + textarea
Disabled fields grey out and drop their shadow, matching the disabled button on states.html. The textarea resizes vertically only — width stays predictable inside a form layout.
The five field states (default, focus, error, valid, disabled) are one set, not a different one per element type.
02
Choice — pick one, or pick several
A native <select> for one choice from a longer list, checkboxes for picking several, radios for picking exactly one from a short visible list. No custom dropdown widget — the native element, restyled.
Select · checkbox · radio
Native, restyled
The select keeps its native behavior — CSS only restyles the border and swaps the arrow. Checkboxes and radios use accent-color:var(--teal), the same recipe as the checklist on Teaching Elements.
On-brand: don't build a custom dropdown for the sake of it. The native element is accessible for free; a custom one has to earn that back.
03
Label & helper text — the convention
The label sits above the field, always — never a placeholder standing in for a label, which disappears the moment someone starts typing. A required field gets a mark, not a guess. Helper text is muted and permanent; an error message is colored and only shows up when something's actually wrong.
Stored encrypted, never logged.
✕ Keys start with sk-. Check for a copy-paste error.
Label & helper
Above, always
Label above the field, not a placeholder pretending to be one.
Required fields get * in --fail-ink, not a color-only cue.
Helper text is muted and always there; an error message is colored and only appears on failure.
04
When validation fires — proof, not just a rule
states.html already says it: validate on blur or submit, never on every keystroke. Type in the field below — nothing turns red while you're still typing. Only when you leave the field does it check.
Waiting for blur…
Validate on blur
Not on keystroke
The input handler does nothing but track that you're typing. Only the blur handler decides whether to show an error.
On-brand: a field that reddens mid-word punishes someone for not being finished yet. Judge the answer once they've given it.
05
Same vocabulary as everything else
Default, focus, disabled, error, success — this is the same five-part state set States & Feedback defines for buttons and containers. This page is that vocabulary applied to input elements, not a second system next to it.
Created for you, with ❤️ by Robert Evans· The AI Design Architect