Textarea
A multi-line text input for longer form content.
Installation
tsx
import { Textarea } from "madagent";Default
Sizes
Helper Text
Write a short bio about yourself
Character Counter
Error State
This field is required
Resize Options
Disabled
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Label text above the textarea |
helperText | string | - | Helper text below the textarea |
errorText | string | - | Error message (sets aria-invalid) |
size | "sm""md""lg" | "md" | Textarea size |
resize | "none""vertical""both" | "vertical" | Resize behavior |
showCount | boolean | false | Show character counter (requires maxLength) |
maxLength | number | - | Maximum character length |
disabled | boolean | false | Disables the textarea |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
اكتب ملاحظاتك هنا
Usage
tsx
<Textarea
label="ملاحظات"
helperText="اكتب ملاحظاتك هنا"
placeholder="اكتب هنا..."
showCount
maxLength={200}
/>