Build · New

Text Area

Multi-line text for longer answers such as notes, descriptions and messages, with Input Field's label, helper text and states, a character counter and a resize handle.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/textarea

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

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

<Textarea label="Note to recipient" limit={200} helperText="The recipient sees this note." />

Examples

States

The same states and colors as Input Field. Size the box to the expected answer: 3 to 6 lines (rows).

Character counter

limit shows “37/100” in the page numerals. Going over is allowed: the counter turns red and the field says why, so text is never cut silently. Screen readers hear “10 characters left” near the limit only.

Resizing

resize: vertical (Figma's handle, the default), auto (grows with the text up to maxRows) or none.

API reference

Textarea

Also takes every <textarea> prop.

Prop	Type	Default	Description
`label`	`ReactNode`		Figma's Label.
`limit`	`number`		Figma's Counter: the counter and the limit, without cutting text.
`limitMessage`	`string`		Your own message past the limit. Default: in the page language.
`resize`	`"vertical" \| "auto" \| "none"`	`"vertical"`	Figma's handle, grow with the text, or fixed.
`rows`	`number`	`4`	Visible lines.
`maxRows`	`number`		With `resize="auto"`: the most lines before it scrolls.
`required / helperText / error / disabled / readOnly`	`…`		As on Input Field.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves focus to the field; Enter adds a line.

ARIA

A real <textarea> with a label; the helper text and the counter are linked with aria-describedby.
Near the limit (20, 10, 5 and 0 left) and past it, the count is announced politely, not on every key.
Going over sets aria-invalid and shows why.
The resize handle is for pointer and touch and hidden from screen readers; resize="auto" needs no dragging.

Arabic and RTL notes

Mirrors

The counter and the handle sit at the inline end (bottom left), and the handle mirrors to point at the corner.

Does not mirror

The counter “37/100” is isolated left to right.

Numerals: The counter follows numerals: ٣٧/١٠٠ or 37/100.
Arabic typography: Text is body-16, with taller Arabic line heights, so each line fits the diacritics.
Mixed-direction text: The field takes dir="auto": an English note in an Arabic form runs left to right and keeps its punctuation at the end.

All components ›