Text Area
The Text Area component is used for multi-line text input with support for validation states and icons.
Usage
Default
const [value, setValue] = useState("");
<TextArea
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Enter your message..."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Enter text" | Placeholder text when empty. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Visual theme for the textarea. |
| state | "success" | "error" | "warning" | - | Validation state coloring. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius of the textarea. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow style applied to the container. |
| outline | boolean | false | If true, renders the textarea with an outlined style. |
| icon | React.ElementType | - | Optional icon component displayed inside the textarea. |
| disabled | boolean | false | Disables the textarea. |
| readOnly | boolean | false | Renders the textarea as read-only. |
| height | string | - | Explicit height for the textarea (e.g. '150px'). |
| resizable | boolean | true | If false, the textarea is not resizable. |
| ariaLabel | string | - | Custom ARIA label for accessibility. |
| ariaDescription | string | - | ARIA description for screen readers. |
| autoComplete | boolean | false | Sets autocomplete. |
| data-testid | string | "text-area" | Test ID for the root element (for testing utilities). |