Input

Installation#

pnpm add @ag/ui

Usage#

import { Input } from "@ag/ui"

<Input />

Examples#

Basic#

Field#

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

Field Group#

Use FieldGroup to show multiple Field blocks and to build forms.

Disabled#

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

Invalid#

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

File#

Use the type="file" prop to create a file input.

Inline#

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

Grid#

Use a grid layout to place multiple inputs side by side.

Required#

Use the required attribute to indicate required inputs.

Badge#

Use Badge in the label to highlight a recommended field.

Input Group#

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

Button Group#

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

Form#

A full form example with multiple inputs, a select, and a button.

RTL#

To enable RTL support in shadcn/ui, see the RTL configuration guide.