Textarea

A multi-line text input with auto-resize, character count, and validation states.

Overview

The Textarea component is a production-ready multi-line text input. It supports 3 validation variants, 3 sizes, auto-resize, character counting, and all standard HTML textarea attributes.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add textarea

pnpm dlx @work-rjkashyap/unified-ui add textarea

npx @work-rjkashyap/unified-ui add textarea

bunx @work-rjkashyap/unified-ui add textarea

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Textarea } from "@work-rjkashyap/unified-ui";

Examples

Variants

<Textarea variant="default" placeholder="Default" />
<Textarea variant="error" placeholder="Error — validation failed" />
<Textarea variant="success" placeholder="Success — validation passed" />

<Textarea variant="default" placeholder="Default" /><Textarea variant="error" placeholder="Error — validation failed" /><Textarea variant="success" placeholder="Success — validation passed" />

Sizes

<Textarea size="sm" placeholder="Small" />
<Textarea size="md" placeholder="Medium (default)" />
<Textarea size="lg" placeholder="Large" />

<Textarea size="sm" placeholder="Small" /><Textarea size="md" placeholder="Medium (default)" /><Textarea size="lg" placeholder="Large" />

Size	Font Size	Padding
`sm`	12px	8px
`md`	14px	12px
`lg`	14px	14px

Auto Resize

{/* Grows indefinitely */}
<Textarea autoResize placeholder="Start typing..." />

{/* Grows up to 150px, then scrolls */}

<Textarea autoResize maxHeight={150} placeholder="Start typing..." />

{/* Grows indefinitely */}<Textarea autoResize placeholder="Start typing..." />{/* Grows up to 150px, then scrolls */}<Textarea autoResize maxHeight={150} placeholder="Start typing..." />

Character Count

0 / 200

0 / 100

<Textarea showCount maxLength={200} placeholder="Write a short bio..." />
<Textarea showCount maxLength={100} placeholder="Brief description..." />

<Textarea showCount maxLength={200} placeholder="Write a short bio..." /><Textarea showCount maxLength={100} placeholder="Brief description..." />

States

This is a read-only textarea value that cannot be edited by the user.

<Textarea placeholder="Enabled" />
<Textarea disabled placeholder="Disabled" />
<Textarea readOnly value="This is a read-only textarea value." />

<Textarea placeholder="Enabled" /><Textarea disabled placeholder="Disabled" /><Textarea readOnly value="This is a read-only textarea value." />

Custom Rows

<Textarea rows={2} placeholder="2 rows" />
<Textarea rows={4} placeholder="4 rows (default)" />
<Textarea rows={6} placeholder="6 rows" />

<Textarea rows={2} placeholder="2 rows" /><Textarea rows={4} placeholder="4 rows (default)" /><Textarea rows={6} placeholder="6 rows" />

With Error Message

BioBio must be at least 20 characters long.

<label htmlFor="bio-textarea" className="text-sm font-medium">
Bio
</label>
<Textarea
id="bio-textarea"
variant="error"
placeholder="Tell us about yourself..."
aria-describedby="bio-error"
/>
<p id="bio-error" className="text-xs text-danger">
Bio must be at least 20 characters long.
</p>

<label htmlFor="bio-textarea" className="text-sm font-medium">Bio</label><Textareaid="bio-textarea"variant="error"placeholder="Tell us about yourself..."aria-describedby="bio-error"/><p id="bio-error" className="text-xs text-danger">Bio must be at least 20 characters long.</p>

With Success Message

BioBio looks great!

<label htmlFor="bio-success" className="text-sm font-medium">
Bio
</label>
<Textarea
id="bio-success"
variant="success"
value="Full-stack developer passionate about design systems..."
aria-describedby="bio-success-msg"
/>
<p id="bio-success-msg" className="text-xs text-success">
Bio looks great!
</p>

<label htmlFor="bio-success" className="text-sm font-medium">Bio</label><Textareaid="bio-success"variant="success"value="Full-stack developer passionate about design systems..."aria-describedby="bio-success-msg"/><p id="bio-success-msg" className="text-xs text-success">Bio looks great!</p>

Combined Features

Quick Note

Description

0 / 500

Feedback

0 / 300

Feedback must be at least 10 characters.

{/* Small note field */}
<Textarea size="sm" rows={2} placeholder="Add a quick note..." />

{/* Auto-resize with character count */}

<Textarea
autoResize
showCount
maxLength={500}
placeholder="Describe your project in detail..."
/>

{/* Large error state with count */}

<Textarea
size="lg"
variant="error"
showCount
maxLength={300}
placeholder="What could be improved?"
/>
<p className="text-xs text-danger">
Feedback must be at least 10 characters.
</p>

{/* Small note field */}<Textarea size="sm" rows={2} placeholder="Add a quick note..." />{/* Auto-resize with character count */}<TextareaautoResizeshowCountmaxLength={500}placeholder="Describe your project in detail..."/>{/* Large error state with count */}<Textareasize="lg"variant="error"showCountmaxLength={300}placeholder="What could be improved?"/><p className="text-xs text-danger">Feedback must be at least 10 characters.</p>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "error" \| "success"`	`"default"`	Visual variant for validation state.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size affecting font size and padding.
`autoResize`	`boolean`	`false`	Whether the textarea grows with content.
`maxHeight`	`number`	—	Maximum height in pixels when `autoResize` is enabled.
`showCount`	`boolean`	`false`	Whether to display a character counter.
`maxLength`	`number`	—	Maximum character limit (enforced natively + shown in counter).
`disabled`	`boolean`	`false`	Disables the textarea.
`readOnly`	`boolean`	`false`	Makes the textarea read-only.
`rows`	`number`	—	Number of visible text lines (standard HTML attribute).
`className`	`string`	—	Additional CSS classes for the textarea element.

All standard <textarea> HTML attributes are also supported.

Accessibility

Always pair error/success variants with descriptive text linked via aria-describedby for screen reader users.

Error variant automatically sets aria-invalid="true" unless explicitly overridden.
Use aria-describedby to link the textarea to error/helper text elements.
Disabled textareas set both the disabled attribute and aria-disabled.
Focus ring is visible on keyboard navigation only (focus-visible).
The character counter is associated with the textarea for screen reader announcement.
Read-only textareas use a muted background to visually differentiate from editable state.

Design Tokens

The Textarea uses the following design system tokens:

Token	Usage
`--border`	Default border color
`--danger`	Error variant border
`--success`	Success variant border
`--muted-foreground`	Placeholder text color
`--disabled`	Disabled background
`--disabled-foreground`	Disabled text color
`--radius-md`	Border radius
`--duration-fast`	Transition speed for focus/hover
`--easing-standard`	Easing curve for transitions

On this page