Input

Basic

A field specifically designed for entering numeric values.

Installation

npx shadcn@latest add @intentui/input

Manual installation

npm i react-aria-components

Anatomy

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

<Input/>

Input group

Sometimes you may want to add a prefix or suffix to an input, and the InputGroup makes this easy. If you place an icon inside the group, it works automatically. However, when using a Text component, you need to set the gutter depending on whether the text is on the left or the right. This step is important because otherwise the input will have incorrect padding and appear misaligned.

Label and Description

Improve the usability of your input fields by adding labels and descriptions. Labels clearly indicate what type of input is expected, while descriptions provide extra guidance or context to help users complete the field accurately.

Text Field

In the example above, a label is used, and you need to set the id to specify which input the label is associated with. When using a TextField, this is handled automatically for you. There is no need to add extra classes either, since the styling and accessibility setup are already built in.

You can learn more in the TextField documentation.

Controlled

You can use the input as a controlled component by managing its state externally.