Textarea
Multi-line text entry for notes, descriptions and code, with its own label, hint, error and character count. Looks and behaves like Input.
Master
Switch size, type, label position and message. Toggle hidden label, required, invalid and disabled. The field is live and resizable.
Usage
Use Textarea for text that runs over one line: notes, descriptions, messages, formulas. Pass label, hint, error and help as props, same as Input. size sets the starting height (100 / 180 / 240+ px); people can drag it taller. type code switches to a monospace font for formulas and snippets. maxLength shows a live count under the field. See contracts/textarea.json for the full contract. A label set at the start goes back on top of the field when the box around it is narrower than 554px, since a 234px label column would leave too little of the field to type in.
Do's
- Notes, descriptions, comments or messages.
- Templates or code snippets (type code). For formulas with insert and check tools, use FormulaEditor.
Don'ts
- Do not invent a local Field, FieldLabel, FieldError, CodeEditor or NotesBox.
- Do not use for one-line values. Use Input.
- Do not use for rich text or syntax highlighting. That is out of scope.
- Do not add a formula toolbar above a Textarea. Use FormulaEditor.
- Do not use a placeholder as the label.
- Do not use raw hex.
<Textarea label="Notes" labelPosition="top" size="md" type="text" placeholder="Add a note for your team" />