Appearance
Default, error, and success appearances
Use `appearance` for validation styling. Error sets `aria-invalid` unless you override it.
Default
Warning
Info
Error
Success
Forms
Inputs for accessible data entry
Text inputs with supporting labels, hints, and error text for React forms. Use them in Next.js server actions or client forms while keeping focus management predictable.
Motion presets
Optional focus and hover motion
Same preset names as the button: `lift`, `press`, `glow`, `tilt`, `bounce`, or `none`.
Lift
Press
Glow
Tilt
Bounce
None
Multiline
as="textarea"
Same CVA recipe, motion presets, and data-slot="input" as the single-line control; height uses min-height and vertical resize so longer copy stays comfortable.
File upload
as="file"
Wraps <input type="file"> with the same CVA recipe. The native file-selector button inherits the active appearance colour, and all three sizes are supported.
sm
md
lg
Checkbox
as="checkbox"
Native type="checkbox" with the same appearance tokens as text fields; size maps to control dimensions.
Appearances
Sizes
Radio
as="radio"
Native type="radio" uses the same accent mapping when checked; use a shared name for mutually exclusive options.
Appearances
Sizes
Group
Sizes
sm, md, lg
Heights align with the button scale. Pass `disabled`, `readOnly`, `autoComplete`, and any other native attribute alongside variants.
Small
Medium
Large
States
Disabled and read-only
Disabled
Read only
Controlled
Value driven by React state
Current value: (empty)
The same state is wired to the controlled example in "Input variants examples" below.
Input variants examples
Use Show output / Show code on each row to compare the live control with the JSX. Each snippet opens with a Variant line naming the axis and token.
Appearance: DEFAULT
Appearance: WARNING
Appearance: INFO
Appearance: ERROR
Appearance: SUCCESS
Appearance: VIOLET
Appearance: AMBER
Appearance: PINK
Appearance: INDIGO
Appearance: ORANGE
Animation: LIFT
Animation: PRESS
Animation: GLOW
Animation: TILT
Animation: BOUNCE
Animation: NONE
Size: SM
Size: MD
Size: LG
Pattern: TEXTAREA + GLOW
Type: PASSWORD
State: DISABLED
State: READ ONLY
Pattern: CONTROLLED
Slot: ERROR MESSAGE
This is an error message
Ring: FALSE
As: FILE
As: CHECKBOX
As: RADIO
Pattern: RADIO GROUP
Type: DATE
What it does
Inputs expose slots for icons and affixes without breaking baseline alignment.
Wire aria-invalid when validation fails and keep error text programmatically associated.
Composition and API
Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.
Avoid duplicating labels when placeholders are decorative only.
Common use cases
- Collect account settings with inline validation.
- Pair with selects and toggles for configuration wizards.
- Capture search terms in filter drawers.
- Power admin tables with inline editing fields.
Accessibility
Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.
This preview page exposes a single h1 in the hero for a clean outline.
Next.js integration notes
Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.
Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.
FAQ
Does the Input component work with Next.js App Router?
Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.
Can I customize input with Tailwind CSS?
Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.
Is this Input implementation accessible by default?
Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.