TextArea

Multi-line text field. Use when the user needs to type a considerable amount of free text — comments, descriptions, messages.

When to use

✅ Use when…	🚫 Avoid when…
Comments, feedback, biographies, messages in forms. Whenever a `maxLength` is declared and showing the character counter to the user is useful.	For a single short line of text. Use `Input`. For structured entry (date, monetary value, phone). Use the masked variations (`InputDate`, `InputCurrency`, `InputMask`).

<TextArea placeholder="Leave a comment" maxLength={140} />
<TextArea size="expansive" variant="success" />


Prop	Type	Default	Description
`maxLength`	`number`	—	Limits the number of characters and displays a counter in the bottom right corner with the remaining number.
`maxLengthHint`	`string`	`characters left`	Counter suffix displayed after the number of remaining characters.
`onChange`	`((e: ChangeEvent<HTMLTextAreaElement, Element>) => void)`	—	—
`resize`	`boolean`	`false`	When `true`, allows the user to resize the `<textarea>` (`resize: both`); when `false`, fixes the size.
`size`	`"expansive" \| "medium" \| "compact" \| "micro"`	`medium`	Textarea size token.
`value`	`string`	—	—
`variant`	`"default" \| "success" \| "error"`	`default`	Textarea visual variant.

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.