React Input
The text-entry foundation: Input with optional leading/trailing adornments (icons, static prefixes, kbd hints), Textarea, and the Field wrapper that wires label, help text, and error message together with correct ARIA. Error state colors the border, ring, and message — and the message replaces the help text, so the layout never jumps.
Lowercase, underscores allowed — used as the RTL top-level name.
/
Part number, family, or keyword.
:8443
This key expired on 2026-06-30.
Shown to customers in the download portal.
Installation
npx shadcn@latest add "http://localhost:3000/registry/input.json"
Usage
Loading...
Props
Input
| Prop | Type | Default | Description |
|---|---|---|---|
| invalid | boolean | false | Error styling + aria-invalid |
| leading | React.ReactNode | — | Adornment before the text (icon, prefix) |
| trailing | React.ReactNode | — | Adornment after the text (unit, kbd) |
Plus all native <input> attributes. Textarea accepts native <textarea> attributes plus invalid.
Field
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Field label |
| htmlFor | string | — | The control's id; also derives the description id |
| required | boolean | false | Shows the required marker |
| help | string | — | Help text under the control |
| error | string | — | Error message; replaces help and turns destructive |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.