Textarea

Alpha

An accessible multi-line text input with label, hint, error, and resize control.

Import

import { Textarea } from "@compa11y/react";

Usage

Example.tsx

import { Textarea } from "@compa11y/react";

function Example() {
  return (
    <Textarea
      label="Message"
      hint="Max 500 characters"
      rows={4}
      required
    />
  );
}

Features

Automatic label association
Hint and error text
Resize control
Compound component API
aria-invalid and aria-describedby for errors

Props

Textarea component props
Prop	Type	Default	Description
`label`*	`string`	-	Label text
`hint`	`string`	-	Help text
`error`	`string`	-	Error message
`value`	`string`	-	Controlled value
`onValueChange`	`(value: string) => void`	-	Called when value changes
`rows`	`number`	`3`	Number of visible rows
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Resize behavior
`required`	`boolean`	`false`	Marks as required
`disabled`	`boolean`	`false`	Disables the textarea

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Textarea
Key	Action
`Tab`	Focuses the textarea