Forms
Textarea
Multi-line text entry, resizable vertically only.
Usage
import { Textarea } from '@misoto22/design'Notes
Multi-line text entry.
Resizes vertically only: horizontal resize lets a reader drag the control past the measure and past the page's own gutter.
Anatomy
| Element | Description |
|---|---|
| Control boxrequired | The <textarea>, on the same CONTROL_BASE as Input plus a min-h-24 floor. That floor is under rows, not over it: rows={2} still renders six rems tall. |
| Resize grip | The browser’s own corner handle, constrained to resize-y — a reader can lengthen the box but cannot drag it past the measure or out of the page’s gutter. |
| Danger border | The same pair isInvalid reads on Input: the invalid prop or an aria-invalid, including the one a Field sets when it has an error. |
Best practices
Do
- Set rows to the answer you expect. It is the only thing that raises the resting height above the six-rem floor, and the size of the box is the clearest thing on the page about how long an answer should be.
- If there is a length limit, set maxLength AND say so in the hint: maxLength swallows the keystroke without explaining, and a paste one character too long is silently truncated.
- Keep Enter meaning newline. A textarea that submits on Enter has taken the one key the control exists to accept, and the reader loses the paragraph they were halfway through.
Don’t
- There is no auto-grow. The height is whatever rows and min-h-24 settled on and it never follows the content, so a long answer is reviewed through a six-rem window unless the call site says otherwise.
- Do not put a required format in the Field’s hint and nothing else: hint and error share one slot, so the format vanishes the instant the field is wrong — which is the only moment anyone needed it.
Examples
default
A resting box at four rows. rows is the only thing that lifts it off the six-rem floor, and the height of the box is the clearest thing on a page about how long an answer is expected to be — so set it to the answer you expect. There is no auto-grow: the height never follows the content, and a long answer left at the default is reviewed through a six-rem window. It resizes vertically only, because a horizontal grip lets a reader drag the control past the measure and out of the page's gutter.
rows and limits
rows sizes the box, maxLength caps it, and the hint says so. maxLength on its own swallows the keystroke without explaining and truncates a paste one character too long in silence, so the count below is not decoration — it is the only warning a reader gets before the box stops accepting what they type. Enter still means newline here, and should: a textarea that submits on Enter has taken the one key the control exists to accept.
183 characters left of 280.
invalid
The wrong state, and the reason the message repeats the rule. hint and error share one slot, so a format written only in the hint vanishes the instant the field is wrong — which is the one moment anyone needed it. Field's error is also the whole of the invalid state: it sets aria-invalid on the textarea, which is the spelling the danger border reads, so there is nothing to pass twice.
Open with a line starting Added, Fixed or Changed — that first word groups the entry in the changelog.