Field with Clear
default · illustrativefocus · illustrativepending · illustrativedisabled · illustrativeerror · illustrativestale · illustrativeANATOMY
- label
- input
- hint
- error
- clearButton
- counter
| State | Looks like | Does |
|---|---|---|
default |
Opaque surface, legible label, essential boundary | Real enabled semantics |
focus |
2px Gold ring + dark separation, 3px offset | Visible, unclipped and not obscured by sticky UI |
pending |
Stable label and small progress mark | Busy, duplicate guard; cancel if operation allows |
disabled |
Muted label, disabled semantics, adjacent reason if useful | No opacity reduction of all ancestor content |
error |
Danger icon, explicit text and retry | Preserve safe inputs; error related to source |
stale |
Muted surface and an age label beside the value | The value stays readable and carries its age; never a pulse |
Four stills of the same transition. Playback repeats it; the stills explain it on their own.
This tier settles every change at once, so the transition cannot be played here. Switch to System or Reduced to see it run.