Components / forms

forms · @awesome-ds/react

Textarea

Multi-line labeled field.

Rules: rule.a11y.wcag-aa

State matrix

idlerequired
focusrequired
disabledrequired
errorrequired

Anatomy

  • label
  • multiline text area
  • hint or error

Keyboard contract

Native multiline editing; Enter inserts a newline rather than submitting implicitly.

Screen-reader contract

Label and descriptive/error text are associated with the textarea.

Content rules

  • State expected content and limits.
  • Do not use placeholder text as a label.

Public API

PropTyperequiredDescription
idstringrequiredAssociation identifier
labelstringrequiredField name
hintstring—Associated supporting guidance
errorstring—Associated recovery message
…nativeTextareaHTMLAttributes<HTMLTextAreaElement>—Native textarea attributes

Adaptation contracts

RTL
Keep label, input, hint, and error aligned to inline-start without changing DOM order.
High contrast
Use system field borders, focus indicators, and non-color invalid cues.
Reduced motion
Change validation and selection states without sliding or spring motion.

Verification IDs

Textarea/multiline-label

Live

Live

Copyable example

import { Textarea } from "@awesome-ds/react";

<Textarea id="bio" label="Bio" />