Inputs
Our input components provide flexible and accessible ways for users to enter and select data.
Interactive Input Demo
This field is required
Input is valid
Please check this field
Current Type: text input.
Input States
This field is required
Input is valid
Please check this field
Input Variants
Input with Icons
Icon Guidelines:
- • Use 16px (h-4 w-4) icons for standard input fields
- • Position leading icons 12px from the left edge
- • Position trailing icons 12px from the right edge
- • Use muted-foreground color for inactive icons
- • Icons should provide visual context or functionality
- • Ensure sufficient padding (pl-10/pr-10) when using icons
Input Specifications
| State | Border Color | Background | Focus Ring | Text Color |
|---|---|---|---|---|
| Default | Border | Background | None | Foreground |
| Focus | Primary-500 | Background | Primary-100 | Foreground |
| Error | Red-500 | Background | Red-100 | Foreground |
| Success | Green-500 | Background | Green-100 | Foreground |
| Warning | Orange-500 | Background | Orange-100 | Foreground |
| Disabled | Neutral-200 | Neutral-50 | None | Neutral-400 |