Avala Design
← Components/primitives

TextArea

Multi-line variant of TextInput. Same Carbon-spec contract: built-in label, helper text, validation states, sizes.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { TextArea } from "@avala/design";

<TextArea state="default">TextArea</TextArea>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-textarea--defaultOpen in Storybook →

When to use

  • Multi-line text input: comments, descriptions, paste targets, prompts.
  • Any field where users may type more than one sentence.

When not to use

  • Single-line input → use `TextInput`.
  • Code or JSON input → use the CodeSnippet pattern with editable mode (planned), or a dedicated code editor.