import { Input } from "@/components/ui/input";
export function InputDemo() {
return (
<Input
id="username"
name="username"
type="text"
placeholder="Username"
autoComplete="off"
className="max-w-xs"
/>
);
}
Installation
npx shadcn@latest add @eo-n/input
Usage
Import all parts and piece them together.
import { Input } from "@/components/ui/input";
<Input />
Examples
Default
import { Input } from "@/components/ui/input";
export function InputDemo() {
return (
<Input
id="username"
name="username"
type="text"
placeholder="Username"
autoComplete="off"
className="max-w-xs"
/>
);
}
With Label
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export function InputWithLabel() {
return (
<div className="w-full max-w-xs">
<Label>Username</Label>
<Input
id="username"
name="username"
type="text"
placeholder="Username"
autoComplete="off"
/>
</div>
);
}
Disabled
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export function DisabledInput() {
return (
<div className="w-full max-w-xs">
<Label>Username</Label>
<Input
id="username"
name="username"
type="text"
disabled
placeholder="Username"
autoComplete="off"
/>
</div>
);
}