TextArea

A multiline text input with built-in label, description, error handling, and configurable resize behavior.

Basic

Prop	Type	Default	Description
`label`	`string`	—	Label text displayed above the textarea.
`description`	`string`	—	Helper text displayed below the textarea.
`error`	`string`	—	Error message displayed below the textarea. Overrides description when set.
`required`	`boolean`	`false`	Marks the field as required with a visual indicator.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the focus ring.
`resize`	`"vertical" \| "horizontal" \| "both" \| "none"`	`"vertical"`	Controls the resize behavior of the textarea.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

label

string

Label text displayed above the textarea.

description

string

Helper text displayed below the textarea.

error

string

Error message displayed below the textarea. Overrides description when set.

requiredfalse

boolean

Marks the field as required with a visual indicator.

color"blue"

Accent color for the focus ring.

resize"vertical"

"vertical" | "horizontal" | "both" | "none"

Controls the resize behavior of the textarea.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}