Form Elements
Complete showcase of all input types and interaction patterns
Text Inputs
Default, icon variants, character counter, disabled
This field is read-only and cannot be modified.
Minimum 8 characters with at least one number.
Textarea
Resizable with live character counter
Use this field to write a detailed description. Keep it under 300 characters.
Select & Dropdown
Native select, multi-select
Hold Ctrl / Cmd to select multiple items.
Checkboxes
Default, card-style, indeterminate state
Card-style Checkboxes
Radio Buttons
Default and card-style
Team Size Radio Cards
Toggle Switches
Colored toggle switches with descriptions
Dark Mode
Switch to a darker color scheme
Notifications
Receive push and email notifications
Auto-Save
Automatically save changes as you type
Usage Analytics
Help us improve by sharing anonymous data
Toggle size variants (small / default / large)
Range Sliders
Interactive sliders with live value display
File Upload
Styled file input and drag-and-drop area
Supported formats: JPG, PNG, PDF. Max 10 MB.
Drop files here or click to browse
PNG, JPG, GIF, PDF up to 10 MB
Date & Time
Date, time, and datetime-local inputs
Select a start and end date for the range.
Color Picker
Native color input with hex display
Selected: #6366f1
Input Groups
Prefix and suffix addon combos
Floating Labels
CSS peer-based animated floating labels
Labels animate upward when the input is focused or filled.
Validation States
Success, error, and warning input feedback
Email address is valid.
Please enter a valid email address.
Password is weak. Consider adding symbols.
Form has 3 validation errors
- Email address format is invalid.
- Password must be at least 8 characters.
- Phone number is required.
Tag Input
Press Enter to add a tag, click × to remove
Press Enter to add a tag.