Text Input
input#password#validation
Preview
1280 px
AI Assistant
Grab the code for this component with a 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.
Code
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
About Text Input
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.
Features
- Borderless inputs with a single bottom border and an animated primary underline on focus (
scaleX(0) → 1) - Leading-icon and trailing-action input variants (search icon, password toggle)
- Password visibility toggle that swaps eye-open and eye-closed icons via a class
- Live validation for name, email, URL, phone, number, password, confirm, and username fields
- Success and error states recolor the underline, label, and hint text
- Disabled state dims and blocks interaction
- Reveal driven by
opacityandtransformonly — never layout properties - Fully respects
prefers-reduced-motion
Accessibility
- Labels
- Every input has an associated
<label for> - Password toggle
- Real
<button>witharia-label="Toggle visibility" - Focus indicators
:focus-visiblewith--ringoutline on interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Text 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 and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Spec Sheet
VanillaReact
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.
#input#validation#password
One-Time Code Input
VanillaReact
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.
#input#login#password
Select
VanillaReact
Three token-driven listbox fields — single-select, multi-select with a Select all row, and a searchable multi-select — each a button trigger paired with a popup listbox, with full keyboard navigation, type-ahead, dark mode, and a responsive grid.
#input#combobox#multi-select
Color Picker
ReactVanilla
An iOS-style color picker with grid, spectrum, and RGB slider tabs, an opacity control, a hex input with alpha, and saved swatches — fully token-driven and design-system agnostic.
#input
Mode Radio
VanillaReact
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.
#input#radio#form
Feature Toggles
ReactVanilla
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.
#input#toggle#switch
Ready to build?
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
