Design System Builder

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/textarea
import { 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

PropTypeDefaultDescription
placeholderstring-

The placeholder prop for the component.

disabledboolean-

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-2

size 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.