Spec Sheet

Features

• Each field is a machined specimen cell: a hairline-boxed input on a lifted white card, annotated with a monospace serial (F-01), an uppercase type tag, and a live state tick
• Leading-icon and trailing-action variants — search glyph, inline clear button, and password reveal toggle
• Clear buttons fade in only once a field holds a value (:not(:placeholder-shown)), driven by opacity only
• Password visibility toggle swaps eye-open and eye-closed icons via a class and reports aria-pressed
• Live validation for name, email, password, and username, recoloring the field border, the state tick, and the mono readout
• Success and error readouts are announced through role="status" + aria-live="polite" regions
• Counted textarea with a live monospace character budget that shifts to cobalt near the limit
• Disabled state dims the specimen and blocks interaction
• Focus, reveal, and state transitions use opacity, transform, color, and box-shadow only — never layout properties
• Fully respects prefers-reduced-motion

Accessibility

Labels

Every input has an associated <label for>

Descriptions

Each field is wired to its readout via aria-describedby

Live validation

Readouts use role="status" + aria-live="polite"; invalid fields set aria-invalid

Password toggle

Real <button> with aria-label and aria-pressed

Clear buttons

Real <button> with a field-specific aria-label

Focus indicators

:focus-visible outline plus a cobalt field halo

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Spec Sheet in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.