Input

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

Installation

npx shadcn@latest add input

Import and use the input component in your project.

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

export default function MyComponent() {
  return <Input />
}

The default input field.

An input with a label.

An input for file selection.

Picture

A disabled input field.

An input combined with a button.

Using input in a form context.

Props available for the Input component.

Prop	Type	Default	Description
type	"text" \| "email" \| "password" \| "number" \| "tel" \| "url" \| "file" \| ...	"text"	The type of input field.
placeholder	string	-	Placeholder text for the input.
disabled	boolean	false	Whether the input is disabled.
className	string	-	Additional CSS classes to apply.
value	string	-	The controlled value of the input.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	-	Callback function when the input value changes.

Input component follows WAI-ARIA input pattern.

Always use a Label component associated with the input using the htmlFor attribute for better accessibility.