Textarea

forms

Multi-line text input with label, helper text, error state with role=alert, focus ring, vertical resize, disabled state, and all native textarea attributes. Mirrors Input API for consistency.

Import

typescript
import { Textarea } from "packages/ui/src";

Props

TextareaProps extends TextareaHTMLAttributes

PropTypeRequired
labelstringNo
helperstringNo
errorstringNo

Examples

Default

With Label & Helper

Provide as much detail as possible.

Error State

Bio must be at least 20 characters.

Disabled

Custom Rows

Minimum 500 words.

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionMulti-line text input with label, helper text, error state with role=alert, focus ring, vertical resize, disabled state, and all native textarea attributes. Mirrors Input API for consistency.
PropsTextareaProps extends TextareaHTMLAttributes (label?: string, helper?: string, error?: string)
Statesdefault, focused, error, disabled, with-label, with-helper
A11y
  • Label linked via htmlFor/id
  • aria-invalid when error
  • aria-describedby linking to error or helper
  • Error message has role=alert
Responsive
  • Full-width by default
  • Min-height set by token
  • Vertical resize only
Motion
  • Border color and box-shadow transition on focus
Token Dependencies
  • components.textarea.background
  • components.textarea.borderColor
  • components.textarea.borderRadius
  • components.textarea.borderWidth
  • components.textarea.padding
  • components.textarea.fontSize
  • components.textarea.textColor
  • components.textarea.placeholderColor
  • components.textarea.focusBorderColor
  • components.textarea.focusRing
  • components.textarea.errorBorderColor
  • components.textarea.errorColor
  • components.textarea.labelColor
  • components.textarea.labelFontSize
  • components.textarea.helperColor
  • components.textarea.helperFontSize
  • components.textarea.minHeight
  • components.textarea.disabledOpacity
  • components.textarea.resizeColor
Content Slotslabel (string), helper (string), error (string), placeholder (string)
CMS Bindings
  • Field label from CMS schema
  • Validation message from CMS
Test Cases
  • Renders textarea element
  • Shows label text
  • Shows helper text
  • Shows error message
  • Error has role=alert
  • Has aria-invalid when error
  • Disabled state applied
  • Passes className through