Input Field
A form element that accepts text, numbers, or other user-entered data.
Plain English
Input fields are where users put information in. They have more states than most components — default, focus, filled, error, disabled, and read-only. Good input design is mostly about what you do not do: do not use placeholder text as the label, do not make the field too small to see what you typed, do not hide the input type until the user focuses. Every input needs a visible label, a sensible width, a clear focus state, and helpful error messages.
Technical
Use <input>, <textarea>, or <select> elements. Always connect <label for="..."> to <input id="...">. Key states: default (light border), focus (accent-coloured border + ring, remove on :focus-visible only), filled (same as default but with value), error (red border + error message), disabled (greyed out). Minimum height: 40px (comfortable tap target). Width: match expected input length — short for PIN, full-width for addresses. Input types: text, email, tel, number, password, search, date — use the correct type for mobile keyboards.
Live Demo
Invalid email address.
Every input needs 5 states: default, focus, filled, error, disabled.
Usage
✓ Good usage
A 40px tall input with a visible label above, 1px muted border, 2px accent border on focus, and an error message below when validation fails.
✗ Bad usage
A 28px-tall input with 12px font — too small to read on mobile, and iOS will auto-zoom on focus.
Recommended values
- Height: 40-44px
- Padding: 8-12px horizontal
- Border: 1px solid muted, 2px accent on focus
- Border radius: 6-8px
- Font size: 16px minimum (smaller causes zoom on iOS)
- Label: above the field, 6px gap
Common mistakes
- Font size below 16px — iOS Safari zooms the page on focus.
- Placeholder as the only label — disappears when typing.
- Not specifying input type (type="email", type="tel") — mobile keyboards do not adapt.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Input fields: 40px height, 16px font size (never smaller), 12px horizontal padding, 1px solid #E2E8F0 border, 2px solid accent on focus, 6px border radius. Label above with 6px gap. Error state: 2px red border + 13px error message below. type="email" for emails, type="tel" for phones.