Component

Textarea

Collect longer responses with native form behavior, clear focus treatment, and controlled resize options.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Textarea } from "@chitrank2050/monoline-ui/textarea"

Basic usage

<Textarea id="summary" placeholder="What changed?" rows={5} />

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Textarea collects prose, notes, messages, or any value that reasonably needs more than one line.

Avoid when

The value is short and predictable, needs rich-text editing, or should be chosen from predefined options.

Accessibility

Textarea keeps native semantics. Pair it with Label, expose invalid state with aria-invalid, and associate descriptions and errors through aria-describedby.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

size"sm" | "md" | "lg"Control padding and minimum height

resize"none" | "vertical" | "both"Allowed resize direction

aria-invalidbooleanApplies validation styling

Design tokens

Theme variables this component reads for color, spacing, and motion.

--surfaceCSS varControl background

--border-strongCSS varControl border

--focus-ringCSS varKeyboard focus

Implementation

The source used by the example above, including any state it needs.

<Textarea id="summary" placeholder="What changed?" rows={5} />

Compare related components or review the package and theme setup.

01ComponentFieldComponent · ReferenceReference→02ComponentInputComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview