Textarea

Displays a form textarea for longer text input.

Installation

npm install @darksnow-ui/textarea

Peer Dependencies

npm install react react-dom

Usage

import { Textarea } from "@darksnow-ui/textarea"
import { Label } from "@darksnow-ui/label"

export function TextareaExample() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}

Props

| Prop | Type | Default | Description | |-------------|-------------------|---------|--------------------------------| | placeholder | string | - | Placeholder text | | value | string | - | Controlled value | | defaultValue| string | - | Default value | | onChange | function | - | Called when value changes | | disabled | boolean | false | Disables the textarea | | readOnly | boolean | false | Makes textarea read-only | | rows | number | 3 | Number of visible rows | | className | string | - | Additional CSS classes |

Examples

Basic Textarea

<Textarea placeholder="Tell us about yourself..." />

With Label

<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
  <p className="text-sm text-theme-content-muted">
    Your message will be sent to our team.
  </p>
</div>

Disabled State

<Textarea disabled placeholder="This textarea is disabled" />

Read-only

<Textarea 
  readOnly 
  value="This content cannot be edited" 
/>

Different Sizes

<div className="space-y-4">
  <Textarea rows={2} placeholder="Small textarea" />
  <Textarea rows={4} placeholder="Medium textarea" />
  <Textarea rows={8} placeholder="Large textarea" />
</div>

Accessibility

• Proper semantic HTML textarea element
• Screen reader accessible
• Keyboard navigation support
• Form integration support
• Label association support

Styling

Uses DarkSnow UI design tokens for consistent theming with form controls.

Related Components

• Input - Single line text input
• Label - Form labels
• Form - Form handling