ual: Design System
Textarea
A multi-line field for longer free-form text entry, such as a message, description, or notes.
When to use
- Use a text area when users need to enter more than a line of text, such as a message, description, or personal statement
- Use a text area when the length of the response is open-ended and cannot be predicted in advance
When not to use
- If users only need to enter a short, single-line response such as a name or email address, use a text input instead. A text area implies an expectation of longer input and may feel disproportionate for short answers
Content guidance
- Set the visible height of the text area to reflect the expected length of the response
- Write placeholder text as an example or prompt, not a repeat of the label
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 area has a visible label. Do not rely on placeholder text as the only label
- If a character count is present, it is associated with the field so screen readers can announce the remaining count
- Error messages are associated with the field programmatically