Input
Text input field for forms with error state support. Supports all standard HTML input types (text, email, password, number, etc.) with consistent styling and accessibility features.
Live Preview
Types
Text Input
Standard text input field
Email Input
Email field with built-in validation
Password Input
Masked password field
Number Input
Numeric input with increment/decrement controls
Search Input
Search field with search-specific styling
Date Time
Date Picker
Native date selection
Time Picker
Native time selection
DateTime Picker
Combined date and time selection
States
Default State
Standard input ready for interaction
Disabled State
Non-interactive disabled input
Read-only Input
Visible but non-editable value
With Addons
Leading Icon
Input with icon or text prefix
Trailing Text
Input with keyboard shortcut or suffix
Leading Addon
Input with attached prefix element
Trailing Addon
Input with attached suffix element
Controlled
Controlled Input with Character Count
React-controlled input displaying live character count
Character count: 0
Search with Clear Button
Search input with clearable functionality
Validation
Max Length
Limit input to maximum character count
Number Range
Constrain numeric input to valid range
Pattern Validation
Regex pattern validation for specific formats
Special
File Upload
Native file selection input
Multiple Files
Allow selection of multiple files
Color Picker
Native color selection
Range Slider
Adjustable range slider
Usage Guidance
✓ When to Use
Use for single-line text input in forms: email, password, search, text fields, numbers, dates. Essential for user data collection and form interactions.
✗ When NOT to Use
Don't use for multi-line text (use Textarea instead), file uploads (use file input), or boolean values (use Checkbox or Switch). Avoid for non-editable text display.
Props
classNamestylechildrenonClickonChange