# Spec Sheet

> Machined field specimens on a cool ground: boxed inputs annotated with monospace serials, type tags, and live state ticks, held by a single accent. Leading icons, clear buttons, password reveal, a counted textarea, and live per-field validation announced through aria-live.

- Category: Input
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Atlas
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: validation, password
- Page: https://builder.atheros.ai/components/spec-sheet
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_spec_sheet/preview-0bb0536532a3.webp

## 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

## Keyboard shortcuts

- `Tab` — Move focus between fields and actions
- `Enter` — Activate the focused clear or reveal button

## Common questions

**Which frameworks is Spec Sheet available in?**

Spec Sheet ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Spec Sheet input component free?**

Spec Sheet is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Spec Sheet support dark mode?**

Yes. Spec Sheet ships light and dark themes, both drawn from the Atlas design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Spec Sheet live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/spec-sheet

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt