Components

Form Inputs

Text fields, number inputs, password fields, and all their required states. The most error-prone component in any UI.

#inputs#forms#text field#input field#validation#placeholder#label

What is it?

Form inputs are interactive elements that accept user-entered data — text, numbers, passwords, dates, and more. They are the primary data collection mechanism in digital products and one of the most error-prone components to design well. An input field has many states and behaviors that must all be explicitly designed.

Why it matters

Baymard Institute research shows that poorly-designed form inputs are responsible for 27% of checkout abandonment. Labels that disappear, error messages that are unclear, and validation that fires at the wrong moment cause users to fail, get frustrated, and leave. Getting inputs right is one of the highest-leverage UX improvements available.

Best Practices

Always use visible labels above the input — never use placeholder text as a substitute for a label.
Placeholder text should show a format example, not the label: "e.g., john@email.com" not "Email Address."
Validate on blur (when the user leaves a field), not on keystroke or only on submit.
Error messages appear below the field, in red, with an error icon, explaining what's wrong AND how to fix it.
Required fields: mark the few optional fields as "Optional" rather than marking all required fields with an asterisk.
Input width should match expected content length — a postcode field should be narrow, not full-width.
For password fields: include a show/hide toggle. Display strength indicator during creation.
Group related fields visually (billing address fields together, contact fields together).
On mobile, use the appropriate keyboard for the input type: number, email, tel, url.
Auto-focus the first input when a form is the primary purpose of the page.

Common Mistakes

Using placeholder text as the label — it disappears when the user starts typing, leaving them without context.
Validation only on submit — the user completes the whole form before discovering field 2 is wrong.
Generic error messages: "Invalid input" — tells the user nothing actionable.
Full-width inputs for short data (postcodes, phone extensions, zip codes).
Not triggering the numeric keypad for phone/number fields on mobile.
Password fields with no show/hide toggle — forces error-prone blind typing.
Required asterisks without a legend explaining what they mean.

Checklist

All inputs have visible, persistent labels above the field

Placeholder text shows format examples, not labels

Validation fires on blur, not only on submit

Error messages appear below the field, explain the problem AND the fix

Error state includes error icon + red border + red text

Input widths match expected data length

Mobile inputs use appropriate input type (email, tel, number, url)

Password fields have a show/hide toggle

Required vs optional fields are clearly communicated

All states are designed: empty, focused, filled, error, disabled, success

Research & Theory

Baymard Institute — Form Usability Research

Extensive research on e-commerce form design. Key findings: inline validation, specific error messages, and correct label placement have the largest impact on completion rates.

Why it's relevant

27% of checkout abandonment is form-related. Correct input design has direct, measurable revenue impact.

Label Placement Research (Matias Duarte, Google)

Research informed Material Design's floating labels — an attempt to provide persistent labels without consuming vertical space.

Why it's relevant

Floating labels solve the label vs placeholder space problem but introduce animation complexity. For most cases, a static label above the field performs as well or better.

Real-World Examples

Stripe

Form inputs with clear labels, real-time validation, card type auto-detection, and specific error messages. The gold standard for payment form design.

GOV.UK

Government research into form design produced some of the most accessible, clear input designs on the web. Labels above fields, explicit error messages, no unnecessary fields.

Linear

Issue creation form: focused, minimal fields, keyboard-first. Every field has a label, sensible defaults, and tab-navigable.