Textarea Component

Textarea components are used for collecting long-form multi-line text input from users.

Default Textarea

The default textarea with placeholder text and a standard height.

Current value: <empty>

Code Example

<Textarea
  placeholder="Enter your message here..."
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Variants

With Label

Feedback

Code Example

<div className="space-y-2">
  <label htmlFor="with-label" className="text-sm font-medium">
    Feedback
  </label>
  <Textarea
    id="with-label"
    placeholder="Tell us what you think..."
  />
</div>

Disabled

Code Example

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

Custom Height

Code Example

<Textarea
  placeholder="This textarea has a custom height"
  className="min-h-[150px]"
/>

With Error

Please enter a valid message

Code Example

<div className="space-y-2">
  <Textarea
    placeholder="This textarea has an error"
    className="border-red-500 focus:border-red-500 focus:ring-red-500"
  />
  <p className="text-sm text-red-500">
    Please enter a valid message
  </p>
</div>