Skip to content

Textarea

Multiline text input with auto-resize, character count, and all Input features.

Forms & Inputs·Available inReactVueAngular·View as Markdown

Preview

tsx

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework
import { Textarea } from "@sisyphos-ui/react";

export const Bio = () => (
  <Textarea
    label="Bio"
    placeholder="Tell us a bit about yourself…"
    maxLength={140}
    showCharacterCount
  />
);

Auto-resize

`autoResize` grows the textarea with content, clamped between `minRows` and `maxRows`.

tsx

With error

Pair `error` with `errorMessage` to show inline validation.

tsx
Please describe the steps to reproduce (at least 40 characters).

Character counter

`showCharacterCount` surfaces a `current / maxLength` counter in the corner.

tsx
0 / 160

API

Props table is being written. See the package README for the complete API surface.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Need more?View on npm →
Was this page helpful?