Enable users to input and validate various types of data with flexible configuration options and platform-specific customization.
Label
Input Types
Type | Description | Validation Features | Best Used For |
---|---|---|---|
Text | General text input | Length, pattern matching | Names, titles, descriptions |
Number | Numeric values only | Min/max values, decimals | Quantities, prices, scores |
Email address format | Built-in email validation | Contact information | |
Password | Masked text input | Strength requirements | Authentication, security |
Code | Monospace code formatting | Both digits and letters | Validating OTPs |
Placeholder Text
Prefix & Suffix
Additional Features
Validator | Purpose | Configuration |
---|---|---|
Required | Ensures field is not empty | Error message customization |
Min Length | Minimum character count | Specify minimum number |
Max Length | Maximum character count | Specify maximum number |
Valid email format | Works with email input type | |
Pattern | Custom regex validation | Define regex pattern |
Event | Description | Common Use Cases |
---|---|---|
CHANGE | Triggered when input changes | Update related fields, trigger calculations, show/hide elements |
FOCUS | When field receives focus | Load dynamic data, show helper content |
BLUR | When field loses focus | Validate input, save data, format display |
Icon Integration
Responsive Sizing
Option | Behavior | Best For |
---|---|---|
Fill | Expands to use available space | Full-width forms |
Fixed | Maintains specified width | Consistent layouts |
Auto | Adjusts based on content | Dynamic forms |
Input Field Styling
Label & Helper Styling
Validation Styling
Scenario | Input Type | Validation | Additional Features |
---|---|---|---|
Contact Form | Text, Email | Required, Email format | Clear buttons, helper text |
Login Form | Text, Password | Required, Min length | Security indicators |
Search Field | Text | Min length | Auto-complete, clear button |
OTP codes | Code | Pattern matching | |
Numeric Input | Number | Min/max values | Prefix/suffix for units |
Address Entry | Text | Format validation | Auto-complete integration |