Input
Input with multiple variants and radius.
Start using via importing:
import { Input } from "@perceptui/ui";<Input placeholder="Enter your name..." />API References
| Prop | Type | Description | Default |
|---|---|---|---|
| variant | "classic" | "standard" | "ghost" | Form of the Input | classic |
| radius | "none"|"sm"|"md"|"lg"|"xl"|"full" | Radius of the Input | lg |
| className | string | className | _ |
Examples
Variant
Use the variant prop to control the visual style of the input.
<Input variant="classic" placeholder="Enter your name..." /><Input variant="standard" placeholder="Enter your name..." /><Input variant="ghost" placeholder="Enter your name..." />Radius
Use the radius prop to assign a specific radius value.
<Input radius="none" placeholder="Enter your name..." /><Input radius="sm" placeholder="Enter your name..." /><Input radius="md" placeholder="Enter your name..." /><Input radius="lg" placeholder="Enter your name..." /><Input radius="xl" placeholder="Enter your name..." /><Input radius="full" placeholder="Enter your name..." />