TextArea Component Playground

Interactive playground to test all TextArea props and variants

Props

Text displayed above the textarea

Visual state of the textarea

Number of visible text lines (default: 4)

Current State

State: default

Required: Yes

Rows: 4

Preview

*
Hint or Helper Text
<TextArea label="Label Text" required supportingText="Hint or Helper Text" placeholder="Placeholder Text" onChange={(e) => { /* handle change */ }} />
{
  "label": "Label Text",
  "required": true,
  "state": "default",
  "value": "",
  "rows": 4,
  "onChange": "(function)",
  "placeholder": "Placeholder Text",
  "supportingText": "Hint or Helper Text"
}

Default

*

Focus

*

Typing

*

Filled

*

Disabled

*

Success

*

Error

*