Textarea

A multi-line text input field that allows users to enter longer form content.

Usage

import { Textarea } from "@rhinolabs/ui"

export default function TextareaDemo() {
  return (
    <Textarea placeholder="Type your message here." />
  )
}

Examples

Basic Textarea

A simple textarea with a label.

<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea id="message" placeholder="Type your message here." />
</div>

With Form

Textarea used in a form context.

<form>
  <div className="grid w-full gap-4">
    <div className="grid gap-1.5">
      <Label htmlFor="subject">Subject</Label>
      <Textarea
        id="subject"
        placeholder="Brief description of your inquiry"
      />
    </div>
    <div className="grid gap-1.5">
      <Label htmlFor="details">Details</Label>
      <Textarea
        id="details"
        placeholder="Provide more details about your request..."
        className="min-h-[120px]"
      />
    </div>
  </div>
</form>

Disabled State

A disabled textarea input.

<Textarea
  disabled
  placeholder="You cannot edit this textarea."
/>

Props

The Textarea component accepts all standard HTML textarea attributes.

Prop	Type	Description
placeholder	string	Placeholder text
disabled	boolean	Whether the textarea is disabled
rows	number	Number of visible text lines
className	string	Additional CSS classes

Design Considerations

• Set appropriate height
• Show clear focus states
• Handle overflow content
• Consider mobile input
• Maintain consistent styling

Accessibility

• Uses semantic markup
• Supports keyboard input
• Maintains focus states
• Provides clear labels
• Handles disabled states