Input
A form field for text, numbers, or other typed data entry.
Inputs are where users communicate back to the product. Their design quality directly affects form completion rates and user frustration levels. Every input needs a visible label, a clear focus state, and an error state.
Anatomy
- Label (above)
- Input field
- Placeholder (optional hint)
- Helper text (below)
- Error message (below)
- Icon adornment (optional)
Variants
TextEmailPassword (with show/hide toggle)NumberTextarea (multi-line)Search (with clear button)
States
DefaultFocus (accent border)Filled (same as default with value)Error (red border + message)Disabled (greyed)Read-only
Rules
✓ Do
- •Minimum 40px height
- •16px minimum font size (prevents iOS zoom)
- •Visible label always — never replace with placeholder
- •Use correct type attribute for mobile keyboard
✗ Don't
- ×Don't rely on placeholder as the label
- ×Don't go below 16px font size
- ×Don't remove focus state
AI Prompt
Paste into Claude, Cursor, Bolt, or v0.
Inputs: 40px height, 16px font, 12px horizontal padding, 1px solid #E2E8F0 border, 2px accent on focus, 6px radius. Label above with 4px gap. Error: red border + error text below.