textarea

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

Philosophy

When a single line isn't enough, Textarea steps in. It's the same design philosophy as Input - a thin wrapper around the native element with consistent styling. We don't add auto-resize or character counting because those are features you compose on top, not defaults everyone pays for.

Installation

npx @gentleduck/cli add textarea

npx @gentleduck/cli add textarea

Usage

import { Textarea } from '@/components/ui/textarea'

<Textarea />

Examples

Default

Disabled

With Label

With Text

With Button

Form

RTL Support

Set the direction once with DirectionProvider (or <html dir="rtl">) and Textarea follows it. No dir prop needed.

Motion

Alpha: Motion Compositions

Motion components work standalone, but some compositions may behave unexpectedly: this is still under active development. If you find a broken composition, please file an issue.

Use MotionTextarea for a smooth entrance animation powered by motion. The textarea uses a scaleIn entrance (fade, scale, and blur) with a springBouncy transition on mount.

Requires the motion package. Use MotionTextarea instead of Textarea. Same props. The regular Textarea is perfectly fine - this is an optional enhancement.

API Reference

Prop	Type	Default	Description
`dir`	`'ltr' \| 'rtl'`	-	Text direction override. Resolved via `useDirection` (`dir` prop -> `DirectionProvider` -> `<html dir>`).
`className`	`string`	-	Additional CSS class names
`...props`	`React.HTMLProps<HTMLTextAreaElement>`	-	Additional props to spread to the textarea element

MotionTextarea

scaleIn entrance (fade, scale, and blur) with springBouncy transition on mount. Requires the motion package.

Prop	Type	Default	Description
`...props`	`TextareaProps`	-	All props from `Textarea` are supported