The TextArea component is layout-independent, that means it only includes the most basic TextArea box part. If you want to add borders, titles, or some operation buttons with it, you can combine with the List or Form components.
In addition, the following native attributes are supported:
autoCompleteautoFocusdisabledreadOnlyonFocusonBluronCompositionStartonCompositionEndonClick.
Basic usage of TextArea component.
| Properties | Description | Type | Default |
|---|---|---|---|
| id | The id of the TextArea element, usually used with label | string | - |
| value | The input value | string | - |
| defaultValue | The default value | string | - |
| placeholder | The hint text | string | - |
| disabled | Whether it is disabled or not | boolean | false |
| readOnly | Whether it is readonly or not | boolean | false |
| onChange | Triggered when the TextArea content is changed | (value: string) => void | - |
| autoSize | Adaptive content height | boolean | { minRows?: number, maxRows?: number } | false |
| rows | The number of rows | number | 2 |
| maxLength | The maximum number of characters | number | - |
| showCount | Displays the number of words, supports custom render count | boolean | ((length: number, maxLength?: number) => ReactNode) | false |