TextArea
A TextArea is a multi-line field for collecting longer user text. It inherits all native <textarea> behaviour from the browser.
Overview
When to use
- To collect multi-line free-form text from the user (comments, descriptions, messages).
- Inside forms where the expected input is longer than a single line.
When not to use
- For single-line input — use
TextInputinstead. - For selecting from a fixed set of options — use a select or combobox.
Variants
TextArea has a single default variant. Height is controlled by the native rows prop rather than variant classes.
States
Default
Focus
On focus, the inner bevel deepens — the top-left shadows intensify to signal the field is active. This state is CSS-driven (:focus) and not statically renderable in a story.
Motion animation — transition-[box-shadow] 150ms
With Value
Disabled
Disabled textareas reduce to 40% opacity and show a not-allowed cursor. The disabled prop is a standard HTML attribute passed directly to the native element.
Controls
Interactive controls are available in Storybook. Open Storybook
Props
Token mapping
| Property | Token |
|---|---|
| background | --color-bg-page |
| text color | --color-text-primary |
| placeholder color | --color-text-secondary |
| bevel (top-left outer) | --sunken-outer-dark |
| bevel (bottom-right outer) | --sunken-outer-light |
| bevel (top-left inner) | --sunken-inner-dark |
| bevel (bottom-right inner) | --sunken-inner-light |
Changelog
| Date | Change |
|---|---|
| 2026-03-27 | Initial component created, mirroring TextInput bevel style for multi-line input |