The Input component is a styled text input field with built-in focus states, validation styling, and accessibility features.
Installation
npx shadcn@latest add @eo-n/input
Install dependencies
Install the required packages:npm install @base-ui/react
Copy component code
Copy and paste the input component code into your project at components/ui/input.tsx.
Update imports
Update the import paths to match your project setup.
import { Input } from "@/components/ui/input";
export default function Example() {
return <Input placeholder="Enter your email" />;
}
Examples
Default
<Input type="text" placeholder="Enter text..." />
With Label
import { Label } from "@/components/ui/label";
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" />
</div>
Disabled
<Input disabled placeholder="Disabled input" />
With Validation Error
<Input aria-invalid placeholder="Invalid input" />
File Input
Password Input
<Input type="password" placeholder="Enter password" />
Number Input
<Input type="number" placeholder="Enter number" />
Search Input
<Input type="search" placeholder="Search..." />
API Reference
Extends all props from @base-ui/react Input component and native HTML input attributes.
The type of input field.Supports all HTML input types: text, email, password, number, tel, url, search, date, time, file, etc.
Placeholder text displayed when the input is empty.
Whether the input is disabled.
Indicates the input has a validation error. Applies error styling.
Additional CSS classes to apply to the input.
Controlled value of the input.
Default uncontrolled value of the input.
Callback fired when the input value changes.
TypeScript
import { Input as InputPrimitive } from "@base-ui/react";
type InputProps = React.ComponentProps<typeof InputPrimitive>;
Styling Features
- Focus ring with customizable ring color
- Error state styling via
aria-invalid
- Disabled state with reduced opacity
- Selection styling with primary color
- Dark mode support
- File input styling with custom button appearance
- Shadow effects for depth
