Textarea
The textarea component allows you to easily create multi-line text inputs
Name@spark-ui/textarea
Version1.2.26
LicenseMIT
Textarea#
The textarea component allows you to easily create multi-line text inputs.
| Attribute | Type | Description | Default |
| isResizable | boolean | If false, the textarea won't be resizable. | |
TextareaGroup#
Use this wrapper whenever you need a more complex textarea. For example if you need to have leading/trailing icons.
| Attribute | Type | Description | Default |
| disabled | boolean | - | null |
| readOnly | boolean | - | null |
| state | "alert" | "error" | "success" | - | null |
TextareaGroup.LeadingIcon#
Prepend a decorative icon inside the textarea (to the left).
| Attribute | Type | Description | Default |
| children* | ReactNode | The svg icon that will be wrapped | null |
| label | string | The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to `alt` text for `img` tags. | null |
| intent | "main" | "alert" | "error" | "success" | "current" | "support" | "accent" | "basic" | "info" | "neutral" | - | null |
| size | "current" | "sm" | "md" | "lg" | "xl" | - | null |
TextareaGroup.TrailingIcon#
Append a decorative icon inside the textarea (to the right). This element will be replaced by a status indicator whenever the textarea is in error/alert/success state.
| Attribute | Type | Description | Default |
| children* | ReactNode | The svg icon that will be wrapped | null |
| label | string | The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to `alt` text for `img` tags. | null |
| intent | "main" | "alert" | "error" | "success" | "current" | "support" | "accent" | "basic" | "info" | "neutral" | - | null |
| size | "current" | "sm" | "md" | "lg" | "xl" | - | null |