Input
Text input field for forms and data entry, with leading/trailing icon slots and an error state.
Installation
npx paubha@latest 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
Add-ons
leadingText shows a fixed prefix such as a URL scheme. leadingAddon and
trailingAddon hold a separate control, such as a currency selector — give
it its own accessible label. Composed types are designed for sm and md;
2xl is for the plain input only. For multiple values as tags, use
Tag Input.
States
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Density: 32 / 40 / 48 / 56 / 64px wrapper height. |
| leadingText | ReactNode | — | Fixed, non-editable prefix before the value (e.g. "https://"). |
| leadingAddon | ReactNode | — | Separate control before the value, such as a currency selector. Label it. |
| trailingAddon | ReactNode | — | Separate control after the value. Label it. |
| error | boolean | — | Marks the input invalid, setting 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.Add-ons. Leading text is presentational and not part of the value. Add-on controls are separate tab stops with their own labels.