Input
Text input field for forms and data entry, with leading/trailing icon slots and an error state.
Installation
npx asteria-ui add inputUsage
import { Input } from "@/components/ui/input";
<Input placeholder="you@example.com" />Input renders as a bordered wrapper around a plain <input> (so icon slots
can sit inside the same border). Pair it with Field
for a label, helper text, and error message wired up with the right ARIA
attributes — Input itself is deliberately just the control.
Examples
Sizes
With icons
States
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "md" | Density — 32 / 40 / 48 / 56px wrapper height. |
| error | boolean | — | Marks the input invalid — sets aria-invalid and the error border color. |
| leadingIcon | ReactNode | — | Instance-swap icon slot before the text, auto-sized to match `size`. |
| trailingIcon | ReactNode | — | Instance-swap icon slot after the text, auto-sized to match `size`. |
| wrapperRef | Ref<HTMLDivElement> | — | Ref to the bordered wrapper, if you need it separately from the input itself. |
Accessibility
Accessibility
Role. Native
<input>, sorole="textbox"is implicit.Label. Input has no label of its own — it requires an associated label via Field.
Error. The
errorprop setsaria-invalid="true"on the real input, which drives the error border via CSS:has()on the wrapper.Focus. The wrapper shows the
glow-focusring onfocus-within, so focusing the inner input rings the whole bordered box, not just the text.