Input

Installation

bunx --bun shadcn@latest add @sui/input

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

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

<Input />

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.