Input
Text input field with support for labels, icons, and error states.
Basic Input
Simple input field
With Label
Input with label text
With Icons
Input with left and right icons
search
visibility
mailcheck_circle
Sizes
Small and medium input sizes
With Helper Text
Input with helper message
Username must be 3-20 characters
Error State
Input showing error
Please enter a valid email address
Disabled State
Disabled input
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | Label text for the input |
leftIcon | string | undefined | Left icon name (Material Symbols) |
rightIcon | string | undefined | Right icon name (Material Symbols) |
error | boolean | false | Error state |
helperText | string | undefined | Error or helper message |
size | 'small' | 'medium' | 'medium' | Size of the input |
disabled | boolean | false | Disabled state |
check_circleWhen to use
- Use for single-line text input
- Provide clear labels that describe the expected input
- Use helper text to provide additional guidance
- Show error states with clear error messages
cancelWhen not to use
- Don't use for multi-line text (use Textarea instead)
- Don't use placeholder as a replacement for label
- Don't use icons that don't relate to the input purpose