Playground
Every control sets a real prop of TextareaProps. The JSX below updates as you go.
Web
iOS
Android
JSX · TextareaProps
Variants
7 examples from src/atoms/textarea/textarea.md, each rendered live from its own JSX.
Sizes
States
Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
Anatomy
1
Label
2
Field
3
Value or placeholder
4
Counter
Dimmed parts appear only in some states or variants.
Props
37 props on TextareaProps, grouped as they are declared in source. Required props are marked *.
MeasureProps · width steps xxxs 192 · xxs 256 · xs 320 · sm 384 · md 448 · lg 512 · xl 576 · xxl 672 · xxxl 768 · wide 896 · wider 1024 · widest 1152 · page 1280, plus start to pin to the leading edge.
Accessibility and keyboard
Keyboard
Type
Edits the value
Tab
Next field
Escape
Clears when clearable
Semantics
ARIA on web
aria-invalid
aria-label
aria-labelledby
aria-live
aria-required
From the docs
Pass label (and required) to name the field: iOS and web render the label above the control, while Android floats the Material 3 in-container label at the top of the multiline box, making room for itself at the user's text size and truncating on one line when it is longer than the box while the field's accessible name stays the whole label. The required star is decorative: a screen reader hears the field as required, from aria-required on the web and from its name ("Bio, required") on iOS and Android. The box
dense preserves application paragraph fields with 13/19.5 semibold values, the dense field inset and explicit visible rows. eyebrow supplies the matching web label. accessibilityLabel overrides the visible label’s accessible name; readOnly prevents edits without dimming or removing the field from focus. systemFocus keeps the platform system focus outline.
embedded renders a bare editor inside a parent-owned field surface and focus frame, as used by Chat. It implies flush and removes the independent backing and focus outline; the parent must provide a visible focus treatment.
Platform skins
The playground's props on each platform: same tree, native shapes, type and touch sizes.
Usage
Pass label (and required) to name the field: iOS and web render the label above the control, while Android floats the Material 3 in-container label at the top of the multiline box, making room for itself at the user's text size and truncating on one line when it is longer than the box while the field's accessible name stays the whole label. The required star is decorative: a screen reader hears the field as required, from aria-required on the web and from its name ("Bio, required") on iOS and Android. The box fills the parent it is given; a step of its own (xs, lg, …, with start to pin it to the leading edge) or a Container step sets its measure.
The box is the single-line Input's on each platform. On the web it is the sunken well with a 1 px hairline that steps to the subtle ink on hover, takes the ring edge and a 4 px accent halo on focus and the destructive edge on error, with a 400 value on a 1.55 line; the count is an 11 px mono caption ("12 / 280"). iOS keeps its 8 pt card box with the error wash and a tabular count ("12/280"). Android uses the same opaque muted surface as the other filled fields, and its count sits at the end of the supporting-text row. Its label uses primary-text when focused and destructive-text on error. The over-limit character count also uses destructive-text on every platform. Without rows the field starts four rows tall.
Inside an overlay, Escape follows the overlay's cancellation policy. A supplied onKeyPress runs first and can call preventDefault() to handle Escape locally. Cancelling an IME candidate keeps the overlay open.
Tokens
Read from the playground render. Values follow the scheme and the ion hue.
--bg2
--fd
--fm
--ft
--ln2
--tx
--tx2
--tx3