Form

Textarea

Multiline text input. Pair with Label and field utilities for accessible forms.

Install

pnpm add @codefast/ui

Import path

@codefast/ui/textarea

Examples

Pair with Button to create a textarea with a submit button.

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

How the parts compose. Copy this skeleton and fill in the slots.

import { Textarea } from "@codefast/ui/textarea";

<Textarea rows={3} placeholder="…" />

Props for each part of the component. All native element props are also forwarded.

A multiline text input. Forwards all native textarea props.

Prop	Type	Default	Description
rows	number	—	Initial visible height in lines.
maxLength	number	—	Hard cap on the number of characters.
value / onChange	string / (event) => void	—	Standard controlled textarea props.

Built to be keyboard-navigable and screen-reader friendly out of the box.

Conventions that keep usage consistent across an app.

Don’t