Forms
Input fields, buttons, selects, and form controls for building interactive forms.
Button
Primary actions, CTAs, and interactive elements
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Button Sizes
Different button sizes for various contexts
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><SearchIcon /></Button>Button States
Loading and disabled states
<Button disabled>Disabled</Button>
<Button disabled>
<Loader2Icon className="animate-spin" />
Loading...
</Button>Input
Text input for single-line data entry
<Input placeholder="Enter your email..." />
<Input type="email" placeholder="Email" />
<Input disabled placeholder="Disabled" />Input with Label
Labeled input with proper accessibility
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="you@example.com" />
</div>Password Input
Password field with show/hide toggle
<PasswordInput placeholder="Enter password..." />Textarea
Multi-line text input
<Textarea placeholder="Enter your message..." />Select
Dropdown selection component
<Select>
<SelectTrigger>
<SelectValue placeholder="Select option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
</SelectContent>
</Select>Checkbox
Toggle boolean values
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms</Label>
</div>