Textarea

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Textarea } from "@tessinaui/ui";

{/* Basic */}
<Textarea label="Description" placeholder="Write something…" />

{/* With character counter */}
<Textarea
  label="Bio"
  maxLength={160}
  showCharacterCounter
  placeholder="Tell us about yourself…"
/>

{/* Auto-resize, capped at 6 rows */}
<Textarea
  label="Notes"
  autoResize
  minRows={2}
  maxRows={6}
  placeholder="Start typing — grows automatically…"
/>

{/* Validation state */}
<Textarea
  label="Feedback"
  intent="error"
  supportingText="This field is required"
  required
/>

Examples

Default

A basic textarea with a label and placeholder.

Sizes

Five sizes from xs to xl scale padding and text.

Intents

Validation states — error, warning, success, and info — recolor the border, focus ring, and supporting text.

Character counter

Pair showCharacterCounter with maxLength to show a live current / max count.

Auto-resize

With autoResize, the height grows as you type — capped here at six rows before scrolling.

Label positions

Place the label outside-top, inside the container, or outside-left.

API Reference

Props

All standard <textarea> HTML attributes (placeholder, name, rows, cols, autoFocus, spellCheck, etc.) are forwarded to the underlying element.

Notes

• Auto-resize: Sets height: auto on each change to measure scrollHeight, then applies the result. Works in both controlled and uncontrolled modes.
• Inside label: The label renders as small text at the top of the container; the textarea has no extra top padding since the label sits above the text flow naturally.
• Character counter turns red when currentLength >= maxLength.
• Read-only applies a subtle bg-secondary/30 background to signal non-editable content.