Textarea
These inputs are used to collect user data that is longer than that of standard input, usually at least one sentence.
Key Points
- Textareas should visually be taller than an input field
- Textareas can be resizeable or non-resizeable
Usage
<label for="more-detail">Can you provide more detail?</label>
<p id="helper-text>Do not include personal or financial information, like your National Insurance number or credit card details.</p>
<textarea aria-describedby="helper-text" id="more-detail" name="more-detail" rows="5"></textarea>
Textareas can be used on forms standalone or as part of longer form.
It is best practice to include instructions as helper text, not as placeholders, so that the guidance is available as the user starts to input data.
Behaviour
Textareas act like other inputs, the user can click or tab into the input and enter data. Textareas can be set to be resizeable or not, giving the user control of the area they wish to enter data.
Validation
<label for="more-detail">Can you provide more detail?</label>
<p id="helper-text>Do not include personal or financial information, like your National Insurance number or credit card details.</p>
<p id="error-msg">Enter more detail</p>
<textarea aria-describedby="error-msg" id="more-detail" name="more-detail" rows="5"></textarea>
A code example of textarea.