Textarea
Textarea is a component component that provides textarea functionality.
Active
Examples
size
Different size options for the Textarea component.
sm
md
lg
Installation
npm install @your-design-system/textareaimport { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
export function TextareaDemo() {
return (
<div className="grid w-full gap-1.5">
<Label htmlFor="message">Your message</Label>
<Textarea placeholder="Type your message here." id="message" />
</div>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | - | The placeholder prop for the component. |
disabled | boolean | - | Whether the component is disabled. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
flexw-fullrounded-mdborderborder-inputbg-backgroundpx-3py-2text-smring-offset-backgroundplaceholder:text-muted-foregroundfocus-visible:outline-nonefocus-visible:ring-2focus-visible:ring-ringfocus-visible:ring-offset-2size Variants
sm
min-h-[60px]md
min-h-[80px]lg
min-h-[120px]Design System Compliance
This component is validated against atomic design principles and foundation token usage.
⚠ Atomic Design Issues
Issue 1Hardcoded spacing found: px-3, py-2. Use semantic spacing tokens.
Fix these issues to ensure your component integrates properly with the design system.
On This Page