Press ⌘K to search

Input

Displays a form input field or a component that looks like an input field.

Installation

pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/input.json

Basic States

Default, disabled, invalid, and read-only states.

Default

With Value

Disabled

Invalid

Read Only

Input Types

Different HTML input types supported.

Text

Password

Number

Tel

URL

Date

Time

Input with Icons

Examples of inputs styled with icons using wrapper divs.

Search with Icon

Email with Icon

Password with Icon

Username with Icon

Form Examples

Real-world form scenarios using the Input component.

Login Form

Registration Form

Input Sizing

Inputs with different width constraints.

Full Width (default)

Custom Width (50%)

Custom Width (300px)

Inline Inputs

File Upload

File input with custom styling.

Single File

Multiple Files

Accept Images Only

Advanced Patterns

Complex input patterns and combinations.

Input with Button

Search with Action Button

Input Group

https://

Input with Suffix Text

SAR

Props

Prop	Type	Default	Description
`type`	`string`	`"text"`	HTML input type
`placeholder`	`string`	—	Placeholder text
`disabled`	`boolean`	`false`	Disables the input
`readOnly`	`boolean`	`false`	Makes input read-only
`aria-invalid`	`string`	—	Marks input as invalid
`className`	`string`	—	Additional CSS classes

Command Palette