Textarea

Multi-line text input with intent variants, sizes, label positions, character counter, auto-resize, and LTR/RTL support.

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
/>

Playground

Preview

Showcase

Preview

API Reference

Props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Padding and text scale
`intent`	`"none" \| "error" \| "warning" \| "success" \| "info"`	`"none"`	Border and focus-ring colour
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`	`"full"`	Border radius
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	CSS resize handle; ignored when `autoResize` is true
`labelPosition`	`"outside-top" \| "inside" \| "outside-left"`	`"outside-top"`	Where the label is rendered relative to the textarea
`label`	`string`	—	Label text
`required`	`boolean`	—	Appends `*` to label and sets `aria-required`
`infoText`	`string`	—	Inline hint rendered beside the label
`supportingText`	`string`	—	Helper / validation message below the textarea
`showCharacterCounter`	`boolean`	`false`	Shows `current / max` counter (requires `maxLength`)
`minRows`	`number`	`3`	Minimum visible rows (maps to HTML `rows` attribute)
`maxRows`	`number`	—	Maximum rows before scrolling (used with `autoResize`)
`autoResize`	`boolean`	`false`	Grows height with content; disables the resize handle
`value`	`string`	—	Controlled value
`defaultValue`	`string`	—	Uncontrolled initial value
`onChange`	`ChangeEventHandler`	—	Called on every keystroke
`disabled`	`boolean`	—	Disables all interaction
`readOnly`	`boolean`	—	Renders with muted background; not editable
`maxLength`	`number`	—	Native character limit; used with `showCharacterCounter`
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Text direction
`wrapperClassName`	`string`	—	Class on the outermost wrapper `div`
`containerClassName`	`string`	—	Class on the inner bordered container `div`

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.