Components

Textarea

Displays a form textarea or a component that looks like a textarea.

Playground

Placeholder—placeholder

Disabled—disabled

Invalid—aria-invalid

Usage

Import Textarea from the design system. The field auto-grows with its content via field-sizing-content from a 64px minimum height — type in the preview to see it expand. Text renders at 16px on mobile — so iOS never zooms the field on focus — and drops to 14px from the md breakpoint up.

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

<Textarea placeholder="Type your message here." />

With Label

Pair the textarea with a Label connected via htmlFor, so clicking the label focuses the field.

Message

<div className="grid w-full max-w-sm gap-3">
  <Label htmlFor="message">Message</Label>
  <Textarea id="message" placeholder="Type your message here." />
</div>

Disabled

A disabled textarea dims to 50% opacity, blocks pointer events, and shows the not-allowed cursor.

<Textarea placeholder="Type your message here." disabled />

Invalid

Set aria-invalid when validation fails — the border and ring switch to the destructive color, and assistive technology announces the state. Inside a Field, FieldError wires this up automatically.

<Textarea placeholder="Type your message here." aria-invalid />

With Button

Stack a textarea and a button in a grid for message composers and feedback forms.

<div className="grid w-full gap-2">
  <Textarea placeholder="Type your message here." />
  <Button>Send message</Button>
</div>

Building forms

For complete forms, wrap the textarea in the Field family — FieldLabel and FieldDescription handle labeling and helper text, and a disabled or invalid Field propagates its state down to the textarea. See the Field page for the full API.

<Field>
  <FieldLabel htmlFor="message">Message</FieldLabel>
  <FieldDescription>Enter your message below.</FieldDescription>
  <Textarea id="message" placeholder="Type your message here." />
</Field>

RTL

Textareas need no extra classes in right-to-left layouts — text alignment, caret, and padding all follow the direction of the document.

التعليقات

<div dir="rtl" className="grid w-full max-w-sm gap-3">
  <Label htmlFor="feedback-rtl">التعليقات</Label>
  <Textarea
    id="feedback-rtl"
    placeholder="تعليقاتك تساعدنا على التحسين..."
  />
</div>

API Reference

Textarea renders a native textarea element and accepts all of its attributes — there are no custom props. Because the field sizes itself to its content, the rows attribute only takes effect in browsers without field-sizing support, where it sets the fallback height.

Tokens used

8 design tokens consumed by the Textarea component.

--input
Input
border-inputdark:bg-input/30
--ring
Ring
focus-visible:border-ringfocus-visible:ring-ring/50
--destructive
Destructive
aria-invalid:border-destructivearia-invalid:ring-destructive/20dark:aria-invalid:border-destructive/50dark:aria-invalid:ring-destructive/40
--muted-foreground
Muted Foreground
placeholder:text-muted-foreground
--text-base
Text Base (16px)
text-base
--text-sm
Text Small (14px)
md:text-sm
--radius-md
Radius 0.8× (8px)
rounded-md
--spacing
Spacing unit (4px)
min-h-16px-2.5py-2