Input

<ComponentPreview styleName="radix-nova" name="input-demo" previewClassName="*:max-w-xs" />

Installation

npx shadcn@latest add input

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="input" title="components/ui/input.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

<Input />

Examples

Basic

<ComponentPreview styleName="radix-nova" name="input-basic" previewClassName="*:max-w-xs" />

Field

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

<ComponentPreview styleName="radix-nova" name="input-field" previewClassName="*:max-w-xs" />

Field Group

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

<ComponentPreview styleName="radix-nova" name="input-fieldgroup" previewClassName="*:max-w-xs" />

Disabled

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

<ComponentPreview styleName="radix-nova" name="input-disabled" previewClassName="*:max-w-xs" />

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.

<ComponentPreview styleName="radix-nova" name="input-invalid" previewClassName="*:max-w-xs" />

File

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

<ComponentPreview styleName="radix-nova" name="input-file" previewClassName="*:max-w-xs" />

Inline

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

<ComponentPreview styleName="radix-nova" name="input-inline" previewClassName="*:max-w-xs" />

Grid

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

<ComponentPreview styleName="radix-nova" name="input-grid" previewClassName="p-6" />

Required

Use the required attribute to indicate required inputs.

<ComponentPreview styleName="radix-nova" name="input-required" previewClassName="*:max-w-xs" />

Badge

Use Badge in the label to highlight a recommended field.

<ComponentPreview styleName="radix-nova" name="input-badge" previewClassName="*:max-w-xs" />

Input Group

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

<ComponentPreview styleName="radix-nova" name="input-input-group" previewClassName="*:max-w-xs" />

Button Group

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

<ComponentPreview styleName="radix-nova" name="input-button-group" previewClassName="*:max-w-xs" />

Form

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

<ComponentPreview styleName="radix-nova" name="input-form" previewClassName="h-[32rem]" />

RTL

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

<ComponentPreview styleName="radix-nova" name="input-rtl" direction="rtl" previewClassName="*:max-w-xs" />