Inputs
A comprehensive collection of input components covering every variant, state, size, and composition pattern you need for forms.
Basic Variants
Shapes & Sizes
Control border radius and height.
States
Visual feedback for interaction states.
Icons & Composition
With Icons
Inputs with leading or trailing icons.
Input Groups
Combine inputs with buttons or static text.
Labels & Validation
Label Styles
Different ways to label inputs.
Validation Messages
Helper text for success, error, and warning states.
Valid email
Invalid email
Special Inputs
Password Input
Secure text entry with visibility toggle.
OTP Input
One-time password fields.
File Input
Upload fields.
Phone Number
Composed input with country selector.
Textarea & Select
Textarea
Multi-line text input.
Select
Native select dropdown.
Floating Label Inputs
Basic Floating
Label floats up on focus or when filled
With Validation Error
Error state with message
Please enter a valid email
Multi Select
With Search & Tags
Select multiple items with search, select all, and clear
Disabled
Non-interactive state
Image Uploader
Square
1:1 aspect ratio
Click or drag to upload an image
PNG, JPG, WEBP up to 5MB
Banner
3:1 wide ratio
Click or drag to upload an image
PNG, JPG, WEBP up to 5MB
Uploading
Loading state
Uploading...
Advanced inputs
Numeric Input
Locale-formatted number input with stepper, currency and percent modes.
Password (with strength meter)
Mask toggle plus an optional strength feedback popover.
Input Mask
Use tokens (9=digit, a=alpha, *=alphanumeric) to format as you type.
AutoComplete
Type-to-filter suggestion list with optional dropdown toggle.
Chips Input
Tag-style entry. Press Enter or comma to add; Backspace removes.
Rich-Text Editor
Lightweight WYSIWYG editor with formatting toolbar.
Selects & toggles
SelectButton
Single or multiple-selection button group.
Multi & Tri-State Checkbox
Cycle through multiple states or true / false / null.
CascadeSelect
Hierarchical popover where only leaf nodes are selectable.
TreeSelect
Pick a single node or check multiple from a tree.
Knob
Drag-to-set circular dial with custom colours and label.
Date & time
Single date
Pop-over date picker.
Multiple dates
Pick any number of individual dates.
Date range
Select a start and end date in one popover.
With button bar
Adds Today and Clear quick actions.
Inline calendar
Always-open variant without a trigger button.
June 2026
Mentions
@ Mention
Type @ to mention a teammate from a searchable popover.
# Tag mention
Custom trigger character — use # for hashtags or topics.
Rich item template
Render avatars and descriptions inside the suggestion popover.
FloatLabel
Float-over label
The label sits inside the field and floats up on focus or when filled.
Variant: on the border
The label sits on the top border of the field, like Material outlined inputs.
IconField
Leading icon
Compose an input with a leading icon — padding is applied automatically.
Trailing icon
Place the icon on the right side of the input.
ListBox
Single selection
Always-open list with single selection and an optional filter input.
Multiple selection (checkboxes)
Toggle multiple values with checkboxes; disabled items are skipped.
KeyFilter
Pattern-restricted input
Restrict keystrokes by preset pattern (int, pint, num, hex, alpha, alphanum, email) or any RegExp.
Value: empty
KaeyrosColorPicker
Rich color picker (HSL gradient + alpha + eyedropper)
Pick from a hue+saturation gradient with alpha, choose hex/rgb/hsl output, and use the EyeDropper API where available.
Selected color:
#3b82f6