Components
TextArea
A multiline text field with support for labels, validation states, hint messages, and custom styling.
Tell us a little about yourself.
Feedback cannot be empty.
Looks good!
Installation
Usage
import { TextArea } from "@/registry/core/text-area";
export default () => (
<TextArea label="Message" placeholder="Write your message..." />
);Examples
Default
<TextArea label="Message" placeholder="Write something..." />With Hint
<TextArea
label="Bio"
hint="Tell us a little about yourself."
placeholder="Your bio..."
/>Error State
<TextArea
label="Feedback"
state="error"
hint="Feedback cannot be empty."
placeholder="Enter feedback..."
/>Success State
<TextArea
label="Description"
state="success"
hint="Looks good!"
placeholder="Enter a short description..."
/>Disabled
<TextArea label="Notes" disabled placeholder="Disabled textarea..." />API Reference
TextArea
Extends textarea element props.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Optional label displayed above textarea |
hint | string | - | Hint text displayed below textarea |
state | 'default' | 'error' | 'success' | 'default' | Visual validation state |
className | string | - | Additional classes for customization |
Accessibility
- Label is automatically associated using a generated
idandhtmlFor. - Uses semantic
<textarea>element. - Disabled state is visually and programmatically communicated.
- Validation states use visible colors but allow assistive tech detection through messaging.
Notes
- States are powered by
class-variance-authorityfor easy extension. - Hint text automatically adjusts color based on validation state.
- Component is fully controlled using native textarea props.
---
# ✅ **Preview Component (`textarea-preview.tsx`)**
```tsx
import { TextArea } from "@/registry/core/textarea";
export default function TextAreaPreview() {
return (
<div className="flex flex-col gap-6 w-full max-w-md">
<TextArea
label="Message"
placeholder="Write something..."
/>
<TextArea
label="Bio"
hint="Tell us a little about yourself."
placeholder="Your bio..."
/>
<TextArea
label="Feedback"
state="error"
hint="Feedback cannot be empty."
placeholder="Enter feedback..."
/>
<TextArea
label="Description"
state="success"
hint="Looks good!"
placeholder="Enter a short description..."
/>
<TextArea
label="Notes"
disabled
placeholder="Disabled textarea..."
/>
</div>
);
}If you want, I can also generate a registry entry, CLI template, or fully match the Radix-style props tables.