Textarea

A multi-line text input component with label and validation support.

Import

import { Textarea } from '@/components/ui';

Basic Usage

<Textarea placeholder="Enter your message" />

Props

Prop Type Default Description
label string - Label text above textarea
error string - Error message (displays in red)
helperText string - Helper text below textarea
rows number - Number of visible rows
disabled boolean false Disable textarea
className string - Additional CSS classes

With Label

<Textarea
  label="Description"
  placeholder="Enter a description"
/>

With Error

<Textarea
  label="Bio"
  error="Bio must be at least 10 characters"
/>

With Helper Text

<Textarea
  label="Comments"
  helperText="Maximum 500 characters"
  placeholder="Leave a comment..."
/>

Controlled Example

'use client';
import { useState } from 'react';
import { Textarea, Button } from '@/components/ui';

export function FeedbackForm() {
  const [feedback, setFeedback] = useState('');
  const maxLength = 500;

  return (
    <div className="space-y-4">
      <Textarea
        label="Feedback"
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        placeholder="Tell us what you think..."
        helperText={`${feedback.length}/${maxLength} characters`}
        error={feedback.length > maxLength ? 'Exceeds maximum length' : undefined}
      />
      <Button color="blue" disabled={!feedback.trim()}>
        Submit Feedback
      </Button>
    </div>
  );
}

Custom Height

<Textarea
  label="Full Description"
  className="min-h-[200px]"
  placeholder="Write a detailed description..."
/>

Form Example

<form className="space-y-4">
  <Input label="Subject" placeholder="Enter subject" />
  <Textarea
    label="Message"
    placeholder="Type your message here..."
    helperText="Be as detailed as possible"
  />
  <div className="flex gap-3">
    <Button outline>Cancel</Button>
    <Button color="blue">Send Message</Button>
  </div>
</form>

Styling

The Textarea component shares styling with Input: