Forms
Text inputs, textareas, selects, checkboxes, radios, toggles, file upload, and search. All interactive — hover, focus, and tab to see states.
Text Input
Block-level input with border-input default, border-primary on focus, and semantic colors for error/success. Optional label, hint text, and leading icon.
Default, with label, with icon
Validation & disabled
Must be at least 3 characters
Available!
Sizes
Textarea
Same border/radius treatment as text input. Defaults to resize-y so users can adjust height. Rows prop controls initial height.
Required field
Sizes
Select
Native <select> with appearance-none and a custom chevron icon positioned absolutely. Same border treatment as text inputs.
Please select a priority
Sizes
Checkbox
Custom-styled box with border-2 and rounded-sm. Checked state fills with bg-primary and shows an SVG checkmark.
Sizes
Radio
rounded-full with an inner dot on selection. Border changes to border-primary when selected.
Sizes
Toggle / Switch
Track + thumb pattern. Off state uses bg-input, on state uses bg-primary. Thumb translates horizontally with transition-transform.
Sizes
File Upload
Two variants: dropzone (dashed border, upload icon, drag-and-drop target) and button (styled like a secondary button with a hidden file input).
Dropzone
Drop files here or click to upload
PNG, JPG, PDF up to 10MB
Drop files here or click to upload
PNG, JPG, PDF up to 10MB
Drop files here or click to upload
PNG, JPG, PDF up to 10MB
Button style
Search Input
Text input with a leading search icon and an optional clear button. The has-value state shows the populated input with clear affordance.
Sizes
Common Pairings
Form elements composed into realistic patterns. Labels above inputs with gap-1.5, field groups separated by gap-6.
Contact form
Settings panel
Email notifications
Receive updates about your account
Marketing emails
New features and product updates
Notification frequency
Search with filters
Shared Patterns
Consistent rules across all form elements.
| Pattern | Classes | Notes |
|---|---|---|
| Label | text-sm font-medium text-foreground | Above input with gap-1.5 |
| Hint (default) | text-xs text-muted-foreground | Below input |
| Hint (error) | text-xs text-destructive | + border-destructive on input |
| Hint (success) | text-xs text-success | + border-success on input |
| Focus ring | border-primary outline-2 outline-ring | All focusable elements |
| Disabled | opacity-50 cursor-not-allowed | + bg-muted on inputs |
| Field spacing | gap-6 | Between form fields in a group |