Input Components
15Explore our comprehensive collection of specialized input components: text inputs, number inputs, date/time pickers, password fields, validators, and more.
All
View all Input components
Text
3Transform
Text transformation (uppercase, lowercase, capitalize)
Input Transform Examples
Automatically converted to uppercase
Automatically converted to lowercase
Reverts to previous value if invalid on blur
Formatted as: 01 23 45 67 89 (0/10 digits)
Special characters are removed
Leading and trailing spaces removed when you leave the field
Only numbers between 18 and 99
Displayed as euros, stored as cents
Leading spaces removed while typing, all spaces trimmed on blur
Clear
Input with clear button
Input Clear Examples
We'll never share your email
Search
Search input with icon
Input Search Examples
Type to search or click button
Numbers
3Counter
Number input with increment/decrement buttons
Input Counter Examples
Currency
Currency input with formatting
Input Currency Examples
Current value: 99.99
Price must be greater than 0
Percentage
Percentage input (0-100%)
Input Percentage Examples
Basic Usage
Enter discount percentage
Current: 75%
Custom Range
Between 0% and 50%
Between 10% and 30%
Without Symbol
Value without % symbol
European Format (Comma)
Uses comma as decimal separator
With Validation
With Fieldset
Without Icon
Error State
Value must be between 0 and 100
Disabled
Read-only
Date & Time
3Date
Date picker input
Input Date Examples
ISO Format (YYYY/MM/DD)
Format: YYYY/MM/DD
Format: YYYY-MM-DD
French Format (DD/MM/YYYY)
Format: JJ/MM/AAAA
Format: JJ.MM.AAAA
Format: JJ-MM-AAAA
US Format (MM/DD/YYYY)
Format: MM/DD/YYYY
Short Formats
Format: DD/MM
Format: MM/YYYY
Format: MM/YY
With Date Range
Only dates between 2020 and 2030
With Date Object Callback
Type a date...
With Fieldsets
Without Icon
With Errors
Invalid date format
Disabled State
Read-only State
Date Range
Date range picker (start/end dates)
Input Date Range Examples
French Format (DD/MM/YYYY)
Format: JJ/MM/AAAA – JJ/MM/AAAA
Format: DD/MM/YYYY to DD/MM/YYYY
ISO Format (YYYY-MM-DD)
Format: YYYY-MM-DD – YYYY-MM-DD
US Format (MM/DD/YYYY)
Format: MM/DD/YYYY – MM/DD/YYYY
With Date Limits
Only dates in 2024
With Range Length Limits
Between 1 and 7 days
Between 1 and 3 months
With Date Range Callback
Type a date range...
With Fieldset
With Error
Invalid date range
Disabled State
Time
Time picker input
Input Time Examples
24-Hour Format
HH:MM format
HH:MM:SS format
HH:MM:SS.MSS format
12-Hour Format (AM/PM)
Click AM/PM to toggle
With Fieldsets
Without Icon
Hours Only
HH format only
With Time Object Callback
Type a time...
With Errors
Invalid time format
Time slot not available
Disabled State
Read-only State
Security
3Password
Password input with show/hide toggle
Input Password Examples
Must be at least 8 characters
Password is incorrect
Survolez l'œil pour voir l'infobulle en français
PIN
PIN code input with multiple digits
Input PIN/OTP Examples
Centered (Default)
Enter the 6-digit code sent to your phone
Aligned to Start
Try 1234
Aligned to End
Aligned to the right
This input is currently locked
Validator
Input with validation rules
Input Validator Examples
Try submitting with invalid data to see validation hints
Specialized
3Card
Credit card number input with formatting
Card Input Examples
Complete Card Form
With Fieldsets
Without Icons
With Errors
Invalid card number
Card has expired
Invalid CVV
Disabled State
Hex Color
Hexadecimal color input (#RRGGBB)
Input Hex Color Examples
Enter hex color (e.g., FF5733)
Enter hex color with alpha (e.g., FF5733FF)
Displayed without # prefix
Short format: #rgb
This will show validation on blur
URL & Email
URL and Email input validation
Input Email & URL Examples
Email Input
Enter your email address
Separate multiple emails with commas
HTML5 validation handles multiple emails automatically
This email is already taken
URL Input
https:// will be added automatically
Enter URL without protocol
Just the input, no action button
Invalid URL format
💡 Tip: Use the tabs above to filter inputs by category or view specific components