Components
Loading preview...
Primitive single-line text input that accepts standard HTML attributes.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-inputimport { Input, Label } from "@/components/ui/heroui-input"
export default function Demo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[var(--default)] p-10">
<div className="flex w-80 flex-col gap-4">
<div className="flex flex-col gap-1">
<Label htmlFor="input-type-email">Email</Label>
<Input id="input-type-email" placeholder="jane@example.com" type="email" />
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="input-type-number">Age</Label>
<Input id="input-type-number" min={0} placeholder="30" type="number" />
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="input-type-password">Password</Label>
<Input id="input-type-password" placeholder="••••••••" type="password" />
</div>
</div>
</div>
)
}