Input

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/input

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components

Anatomy

import { Input } from "@/components/ui/input";

<Input/>

Examples

Input group

Use InputGroup to add prefix or suffix content. Icons receive spacing automatically. For Text content, set --input-gutter-start or --input-gutter-end to reserve enough space on the corresponding side.

Label and description

Use a label to name the input and a description to provide instructions.

Text field

For a standalone input, match its id to the label’s htmlFor. TextField associates its label, input, and description automatically.

You can learn more in the TextField documentation.

Controlled

Pass value and update it with onChange to control the input.

Component API

Input

InputGroup