Form

Textarea

A multi-line text box that grows with its content.

Import

import { Textarea } from "@booleanpress/ui/textarea"

Usage

Textarea is a styled native textarea. Name it with a Label whose htmlFor is its id.

import { Label } from "@booleanpress/ui/label"
import { Textarea } from "@booleanpress/ui/textarea"

export function Signature() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="signature">Email signature</Label>
      <Textarea id="signature" />
    </div>
  )
}

It takes every attribute of a native textarea. It is uncontrolled with defaultValue, or controlled with value and onChange. It is at least 64 px tall and grows with its text (field-sizing: content); set rows or a max-h-* class to limit it. To put buttons or a counter inside the box, use InputGroupTextarea.

Examples

Basic

A labelled textarea with a placeholder.

Email signature

Grows with its text

The box is as tall as its content, never shorter than 64 px.

Disabled

A disabled textarea cannot be focused or edited.

Bounce reason

Invalid

aria-invalid draws the error border; aria-describedby reads the message with the name.

Internal note

Write a note before you save.

Accessibility

Semantics: A native textarea, role textbox, multi-line.
Labels: Name every textarea: a Label with htmlFor, or aria-label. A placeholder is not a name. Put hints and errors in aria-describedby.
Focus: It is in the tab order unless disabled. Tab moves on; it does not insert a tab character. The focus ring shows on keyboard focus.
Known limits: Growing with content depends on field-sizing: content. A browser without it shows the 64 px box with a scrollbar.

Keyboard

Keyboard
Key	Behaviour

API

Textarea

Renders a textarea and passes it every other prop.

Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.

Data attributes: data-slot="textarea" (Textarea).

Theming

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
Token	Used for
`--control`	border
`--destructive`	border, focus ring
`--input`	border, background
`--muted-foreground`	text
`--ring`	border, focus ring