Input
shadcn/uiDisplays a form input field or a component that looks like an input field.
Input
import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";<div className="flex flex-col gap-4"> <div className="flex flex-col gap-1.5 max-w-md"> <Label htmlFor="email"> Email </Label> <Input id="email" placeholder="Enter your email" type="email" variant="raised" /> </div> <div className="flex flex-col gap-1.5 max-w-md"> <Label htmlFor="password"> Password </Label> <Input id="password" placeholder="Enter your password" type="password" variant="raised" /> </div> <div className="flex flex-col gap-1.5 max-w-md"> <Label htmlFor="disabled"> Disabled </Label> <Input disabled id="disabled" placeholder="Disabled input" type="text" variant="raised" /> </div></div>import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";<div className="flex flex-col gap-4"> <div className="flex flex-col gap-1.5 max-w-md"> <Label htmlFor="email"> Email </Label> <Input id="email" placeholder="Enter your email" type="email" variant="raised" /> </div> <div className="flex flex-col gap-1.5 max-w-md"> <Label htmlFor="password"> Password </Label> <Input id="password" placeholder="Enter your password" type="password" variant="raised" /> </div> <div className="flex flex-col gap-1.5 max-w-md"> <Label htmlFor="disabled"> Disabled </Label> <Input disabled id="disabled" placeholder="Disabled input" type="text" variant="raised" /> </div></div>Installation
pnpm dlx shadcn@latest add @optics/input
Props
<Input />
Name | Type | |
|---|---|---|
variant | any | |
onValueChange | (...args) => void | |
render | React.ReactElement |