Input

A single-line text input built on Base UI's Input primitive. It provides consistent styling for text, email, password, number, and file inputs with focus ring, placeholder, disabled, and invalid states.

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

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

Anatomy

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

<Input type="text" placeholder="Enter text..." />

Examples

Basic input

<Input placeholder="Email address" type="email" />

With disabled state

<Input placeholder="Disabled input" disabled />

File input

The file input renders an inline file button with consistent styling.

<Input type="file" />

Invalid state

Set aria-invalid="true" to display destructive styling with a red border and ring.

<Input placeholder="Email" aria-invalid="true" />

API Reference

Input

A styled <input> element. Accepts all standard HTML input attributes.