Input

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

Installation

npm install @radix-ui/react-label

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

export function InputDemo() {
  return <Input type="text" placeholder="Email" />
}

Disabled

Error

This field is required.

Read-only

Name	Type	Description
type	string	The type of the input field.
placeholder	string	The placeholder text for the input.
disabled	boolean	Whether the input is disabled.
readOnly	boolean	Makes the input read-only.
className	string	Additional CSS classes to apply to the input.
...props	InputHTMLAttributes	All standard input HTML attributes are supported.

The input component is built on top of the native HTML input element and supports all of its accessibility features.

Always use the Label component with inputs for proper accessibility.
Use aria-describedby to associate helper or error text with the input.
Use appropriate type attributes for different input types (e.g., email, password).
Add aria-invalid="true" to inputs with validation errors.