Textarea

Multi-line text editor with support for fluid sizing, custom borders, states, and responsive grids.

Preview & Interactive Laboratory

Default Textarea

Your Message

Disabled & Custom Sizes

Disabled State

Custom Tall Rows (rows=6)

Vibrant Overrides

Vivid Emerald Border

Soft Lavender Glow

Usage & Implementation

import { Textarea } from "@/components/ui/textarea"

<Textarea 
  placeholder="Type your message here..." 
  className="min-h-[120px] focus:ring-2"
/>

React / Tailwind

Granular Customization

Textarea Box

The main text area element containing standard placeholders and text values.

className={`className`}

Min Height

Configures default height boundaries for text input.

className={`min-h-[150px]`}

Focus Glow

Enhance active highlight state using custom focus colors.

className={`focus-visible:border-violet-600`}

API Reference (Props)

Prop	Type	Default	Description
placeholder	string	undefined	Placeholder message printed when input is empty.
disabled	boolean	false	Disables focus and inputs on the text block.
rows	number	3	Core initial row height index.