Textarea

Overview

Use Textarea for multi-line text.

Textareas are useful for comments, descriptions, notes, feedback, support messages, and any field where the answer may be longer than one line.

Anatomy

A textarea has a value, placeholder, size, disabled state, and optional validation state. It should usually be wrapped in Field.

Usage guidance

Use Input for short single-line values. Use Textarea when users need space to write. Set a sensible minimum height so the field does not feel cramped.

Accessibility

Always provide a label. Add helper text when users need to know expected length, format, or privacy context.

Installation

npx love-ui@latest add textarea

Usage

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

<Textarea />

Examples

The examples show sizes, disabled state, labels, and form integration.

For accessible labelling and validation, prefer using the Field component to wrap textareas. See the related example: Textarea field.

Small Size

Large Size

Disabled

With Label

Form Integration