Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Input component
A one-time code input for sign-ins, 2FA and email verification. Six digit boxes share one real input, a focus ring glides to the next box as you type, the texted code arrives with an Autofill chip, a wrong code shakes and clears, and the right one ripples green box by box.
Open One-Time Code Input 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 source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.

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.

A bare token-driven group of four AI feature switches — Streaming, Memory, JSON mode, and Tool use — with design-system accent tracks, sliding thumbs, live screen-reader announcements, and clickable row labels in both light and dark.

Token-driven text inputs with a borderless bottom-line style, animated focus underlines, leading icons, password visibility toggles, live per-field validation, dark mode, and a responsive two-column layout.

A bare token-driven response-mode radiogroup — Balanced, Precise, Creative — with gradient-ringed dots that fill with the brand two-color gradient when checked, native arrow-key radio semantics, and a polite live announcement of the chosen mode — themed by the AI Steppers design system.

A bare token-driven capability checkbox group — three label-wrapped custom checks whose boxes fill with the brand two-color gradient and pop in a springy check mark when selected, announcing a live selected count — themed by the AI Steppers design system in both light and dark.

A five-block confidence threshold meter backed by native radio inputs — click a block or drag across the meter to snap the threshold, watch the brand gradient update while a quiet crossfading readout follows — themed by the AI Steppers design system in both light and dark.
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually

🚀 A gift to our long-term supporters — 30% off Atheros Plans