Skip to Content
Sponsor

Textarea

The Textarea component allows you to easily create multi-line text inputs.

Import#

Usage#

Editable Example

Controlled Textarea#

Value:

Editable Example

Resize behavior#

You can add resize prop to change the Textarea resize behavior.

Editable Example

Disabled Textarea#

Editable Example

Invalid Textarea#

Editable Example

Props#

The Textarea composes the Input component.

NameTypeDescriptionDefault
colorSchemestring-
errorBorderColorstringThe border color when the textarea is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"-
focusBorderColorstringThe border color when the textarea is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"-
isDisabledbooleanIf `true`, the form control will be disabled. This has 2 side effects: - The `FormLabel` will have `data-disabled` attribute - The form element (e.g, Input) will be disabled-
isFullWidthbooleanIf `true`, the textarea element will span the full width of its parent-
isInvalidbooleanIf `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`-
isLoadingbooleanIf `true`, the form control will be in its `loading` state-
isReadOnlybooleanIf `true`, the form control will be readonly-
isRequiredbooleanIf `true`, the form control will required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-requred` set to `true`-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
variantstring-
Edit this page