Textarea

A multi-line text input for comments, descriptions and messages. Inside a Field it picks up its id, description, error and required state.

StableSource

<Textarea aria-label="Message" placeholder="Write a message…" />

Import

tsx

import { Textarea } from "@merid/react";

Examples

Resize

The handle defaults to vertical. Use none when the layout must not change, both rarely.

<Textarea rows={2} placeholder="resize vertical (default)" />
<Textarea rows={2} resize="none" placeholder="resize none" />
<Textarea rows={2} resize="both" placeholder="resize both" />

Invalid and disabled

<Textarea rows={2} invalid defaultValue="Too short" />
<Textarea rows={2} disabled defaultValue="Disabled" />

Controlled with a counter

0 / 140

const [value, setValue] = useState("");

<Textarea
aria-label="Status"
value={value}
maxLength={140}
onChange={(event) => setValue(event.target.value)}
/>
<Text size="xs" tone="muted" numeric>{value.length} / 140</Text>

API reference

Textarea forwards its ref to the <textarea> and passes every other native attribute through.

Prop	Type	Default	Description
`resize`	`"none" \| "vertical" \| "both"`	`"vertical"`	User resize handle.
`invalid`	`boolean`	–	Forces the invalid style (`data-invalid`) and `aria-invalid`. Inside a Field, derived from its error.
`rows`	`number`	`4`	Visible text lines (native).

Styling

Hook	Values
`.mrd-textarea`	The <textarea>
`data-resize`	`none` · `vertical` · `both`
`data-invalid`	Present when invalid; drives the danger border (`aria-invalid` carries the semantics)

Textarea shares the Input styles in input.css; it has no size variants.

Accessibility

Give it a visible label through Field or Label.
If you show a character counter, keep maxLength and the visible count in sync; consider linking the counter with aria-describedby.

Key	Action
`Tab`	Moves focus to the textarea.
`Enter`	Inserts a line break (it does not submit the form).

Guidelines

Size rows to the expected answer length so people know how much to write.

Avoid

Use a Textarea for single-line values like names or emails.

Input — single-line text.
Field — label, description and error wiring.