Room to write. Grows predictably, never traps the scroll.
| Prop | Type | Notes |
|---|---|---|
| label / hint | string | Mono label above; helper below |
| autoGrow / maxRows | boolean / number | Height tracks content, then scrolls |
| resize | vertical · none | User drag handle; vertical is the default |
| maxLength / showCount | number / boolean | Live counter; field reddens past the limit |
| status | error · success | Border and message colour |
| disabled | boolean | Read-only, opacity 0.42 |
Use a Textarea for multi-line prose. For a single line use Input; for a fixed short code use Pin Input.
Size the field to the expected answer. A few lines invites a few lines.
Don't use a textarea for a one-line value. That is an Input.
Show the counter only when a limit exists, and warn before the wall.
Don't lock the height so small it traps the scroll. Let it grow or resize.
Auto-growing comment field that starts compact and expands as needed.
Profile bios pair the field with a live character budget.
Labeled message field in a contact or support form.
| Token | Value | Role |
|---|---|---|
| --ta-min-h | 92px | Resting min-height (~3 lines) |
| --ta-pad | 10px 12px | Inner padding |
| --ta-line | 1.55 | Comfortable reading line-height |
| --ta-bg | #0E0F12 | Field fill |
| --ta-focus | rgba(255,122,0,.14) | 3px warm focus ring |
| --ta-error | #EB4A4F | Over-limit and error border |
<label class="o-field"> <span class="o-field__label">Release notes</span> <textarea class="o-textarea" rows="4" placeholder="Write here…"></textarea> <span class="o-field__count">0 / 140</span> </label>