Textarea
A tokenized multiline native control with vertical resizing and full form behavior.
Contract
TRTextarea preserves native refs, names, FormData, reset, disabled, read-only, required, and invalid states.
Pair it with TRField.Root and TRField.Label. The field associates the label and any TRField.Error message with the textarea, so you do not write id or htmlFor yourself.
Use uiSize="md" for dense surfaces and uiSize="lg" when a larger reading and editing target is useful. Content scrolls natively when it exceeds the visible rows, while resizing is limited to the vertical axis to avoid horizontal layout overflow.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/textarea.css';Scroll inside the code area to read long lines.
Imports
import { TRTextarea } from '@tinyrack/ui/components/textarea';Scroll inside the code area to read long lines.
Playground
Usage
Examples
FormData and native reset permalink
Edit the note, submit it, then reset to restore the original default value.
Required submit and recovery permalink
Submit empty to move focus to the invalid textarea, then enter a reason and submit again.
API
TRTextarea forwards every native textarea prop, ref, event, class, and style. Its default resize direction is vertical and native validity remains authoritative.
| Prop | Type | Default | Description |
|---|---|---|---|
uiSize | 'md' | 'lg' | 'md' | Applies the matching control typography, padding, and minimum block size. |
| Native props | ComponentPropsWithRef<'textarea'> | n/a | Includes value, defaultValue, rows, name, validation attributes, events, styles, and ref. |