Installation
Run the following command:
Update your imports:import { Input } from "@/components/ui/input"
import { Input } from "@/components/ui/input"Usage
import { Input } from "@/components/ui/input";
export default function Home() {
return (
<Input type="email" placeholder="Email" />
);
}Usage with Icon
import { Input } from "@/components/ui/input";
import { Mail } from "lucide-react";
export default function Home() {
return (
<Input
type="email"
placeholder="Email Address"
Icon={Mail}
iconPlacement="left"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | underline | pill | default | Style variant of the input |
| inputSize | xs | sm | md | lg | xl | 2xl | md | Size of the input |
| asChild | boolean | false | Render as a child component |
| Icon | React.ElementType | - | Icon component to be displayed |
| iconPlacement | left | right | left | Placement of the icon |
HTML & Radix UI Props
The Input component supports:
HTML Attributes
Standard HTML input attributes (except 'size' which is replaced by
inputSize):typeplaceholderdisabledrequiredreadOnlyvalueonChangeonFocusonBluraria-*attributesdata-*attributes
The Input component ensures proper accessibility and semantic HTML.