Textarea

atoms

Multi-line text input. Auto-grows, char counter, helper text, error state. Same label/error/required contract as Input.

ARIA Role: textbox

Demo

Demo for Textarea (atoms)

Multi-line text input. Auto-grows, char counter, helper text, error state. Same label/error/required contract as Input.

Props

Prop	Type	Required	Default
`label`	`string`	Yes	`—`
`value`	`string`	Yes	`—`
`onChange`	`(value: string) => void`	Yes	`—`

TypeScript Interface

interface TextareaProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  rows?: number;
  maxLength?: number;
  showCounter?: boolean;
  helperText?: string;
  error?: string;
  required?: boolean;
  id?: string;
}

Assertions (NASA Rule 5)

[type]label required for SR binding(WCAG 1.3.1)
[aria]aria-invalid + aria-describedby when error; aria-required when required(WCAG 3.3.1, 3.3.2)

Usage

Import

import { Textarea } from '@epasslive/design-system'

Basic

<Textarea />

With Variants

<Textarea variant="primary" size="md" />