Design System
Input
Input fields allow users to enter and edit text. They provide a consistent interface for text input across the platform.
Basic Usage
Input components are styled consistently and support all standard HTML input attributes.
Default
Input Types
Inputs support all standard HTML input types for different use cases.
Text
Password
Number
Search
States
Inputs support disabled and readonly states for different interaction scenarios.
Enabled
Disabled
Readonly
Usage
import { Input } from "@/components/ui/input";
export function MyForm() {
return (
<div className="space-y-4">
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
</div>
);
}Props
Input accepts all standard HTML input element props, including type, placeholder, disabled, readOnly, value, onChange, and more.