ual: Design System
Text input
A single-line field for short, free-form text entry – such as a name, email address, or search term.
When to use
- Use a text input when users need to enter a short piece of free-form text, such as a name, email address, or reference number
- Use a text input when the expected response fits on a single line and does not require formatting
When not to use
- If users need to enter more than a line or two of text, use a text area instead. A single-line field truncates longer input and creates a poor experience for extended responses
- If users are choosing from a known set of options, use a select, radio button or checkbox group instead. A text input is for free-form entry, not selection
Content guidance
- Write placeholder text as an example of valid input, not a repeat of the label. For example, a field labelled "email address" could use "name@example.com"
- Keep labels short and specific, one to three words where possible
Accessibility
This component is designed with accessibility built in:
- Colour contrast meets 4.5:1 for input text and label against the field background
- Focus state is visually distinct and meets 3:1 contrast against adjacent colours
- Touch target meets the minimum 44x44px tap area
When implementing, verify:
- Every text input has a visible label. Do not rely on placeholder text as the only label, as it disappears on input
- Error messages are associated with the input programmatically so screen readers announce them