Textarea
Multiline text input with auto-resize, character count, and all Input features.
Preview
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/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
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`.
With error
Pair `error` with `errorMessage` to show inline validation.
Character counter
`showCharacterCount` surfaces a `current / maxLength` counter in the corner.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "standard" | "outlined" | "underline" | "outlined" | Visual treatment. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Field size + typography scale. |
| radius | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Border radius scale. |
| label | string | — | Field label rendered above the textarea. |
| error | boolean | false | Marks the field as invalid for styling and ARIA. |
| errorMessage | string | — | Message shown below the field when `error` is true. |
| showCharacterCount | boolean | false | Show a `current / maxLength` counter (requires `maxLength`; hidden while an error message is shown). |
| autoResize | boolean | false | Grow the height with content, clamped between `minRows` and `maxRows`. |
| minRows | number | 3 | Minimum visible rows when `autoResize` is enabled. |
| maxRows | number | — | Maximum visible rows when `autoResize` is enabled; overflow scrolls past it. |
| resize | "none" | "vertical" | "horizontal" | "both" | "vertical" | Native CSS resize handle direction. |
| fullWidth | boolean | false | Stretch the textarea to its container width. |
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.
Accessibility
- The label is wired through
htmlFor/id(auto-generated whenidis omitted). aria-invalidmirrorserror; the error message is announced withrole="alert".- Error message and character counter are linked to the field through
aria-describedby. disabled,readOnly, andrequiredare forwarded to the native<textarea>so form and AT semantics stay intact.