Basic Input
Basic Input
Basic Input is a versatile text input field supporting various input types, validation states, icons, and masking.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Height | 48px |
| Border Width | 1px |
| Corner Radius | 4px |
| Padding | 12-16px horizontal |
| Font Size | 14-16px |
| Border Color | Grey40 (default), Red (error) |
States
Section titled “States”Grey40 border, normal state
Brand color border, active input state
Red border, validation failed
Grey border with reduced opacity, not interactive
Variants
Section titled “Variants”Default text input without additional elements
Includes prefix or suffix icon (search, clear, etc.)
Shows validation error with red border and message
Includes currency symbol or other prefix text
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Collecting single-line text input
- Form fields with validation
- Search functionality
- Filter/criteria inputs
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Provide meaningful labels | Use for multi-line input (use textarea) |
| Use appropriate input types | Hide critical information in icons |
| Show clear error messages | Override browser autofill unnecessarily |
| Support keyboard navigation | Use placeholder as label |