What it must accomplish
Help someone provide information with the least ambiguity and correction effort possible.
Usage
Choose the control by behavior
- The response cannot be represented by a small, known option set
- People may need to paste, edit, or review a value
- A predictable input type can improve the keyboard and validation experience
- A select, radio group, or checkbox set would expose valid choices
- The value should be read-only
- The task asks for information that is not genuinely needed
Anatomy
Stable parts create a reliable contract
- 1Persistent label
- 2Input container and value
- 3Optional hint
- 4Required or optional indicator
- 5Inline error connected to the field
- 6Character count or affordance when necessary
Interaction and keyboard behavior
- Tab moves focus to the field
- Native editing, selection, undo, and clipboard commands remain available
- Enter submits only when the surrounding form intentionally supports it
Visual similarity does not guarantee behavioral equivalence. The component contract must preserve state, focus, semantics, and recovery across input methods.
Accessible behavior
- Use a programmatic label; placeholder text is not a replacement
- Connect hints and errors with accessible descriptions
- Identify errors in text and preserve the entered value
- Choose the correct input type and autocomplete purpose
Responsive considerations
Adapt the decision—not only the dimensions
Keep labels and errors close to the field. On narrow screens, prefer a single readable column and allow the browser to provide the appropriate software keyboard.
Content considerations
Language is part of the component
- Ask one clear question
- State format constraints before entry
- Use examples only when they reduce ambiguity
- Explain how to recover, not merely that a value is invalid
Patterns that weaken the experience
Using placeholder text as the only label
Validating before a person has had a reasonable chance to respond
Clearing invalid input
Using one field for several unrelated values
Comparison
What to study across systems
GOV.UK and NHS are especially useful for form questions and error recovery; Carbon is valuable for dense enterprise forms; Material makes field variants and state styling explicit.
Open comparison