Textarea
A multi-line field for free text: a description, an instruction, a note.
On this page
Playground
State
Background
<div class="feitio-field"><label class="feitio-label" for="pg-ta">Note</label><textarea class="feitio-textarea" id="pg-ta" rows="3">Remind me to replace the catalog photos.</textarea></div>When to use
- When the answer has more than one sentence.
When not to use
- For a short answer: TextInput. A big box asks for a big text.
Examples
NoteUp to 500 characters
A note
The character limit, when there is one, comes in the hint beforehand, not only once exceeded.
Show code
<div class="feitio-field">
<label class="feitio-label" for="nota">Nota</label>
<span class="feitio-hint" id="nota-dica">Até 500 caracteres</span>
<textarea class="feitio-textarea" id="nota" rows="3" aria-describedby="nota-dica"></textarea>
</div>States
Accessibility
- The person can stretch the height; the width follows the column.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-textarea" | required | The field’s shape. |
rows | number | The initial height. |
aria-invalid="true" | with an error | The wine line. |