Color Schemes for Textarea are not implemented in the default theme. You can extend the theme to implement them.
Textarea
The Textarea component allows you to easily create multi-line text inputs.
Props#
The Textarea composes the Input component.
colorScheme
colorSchemeDescription
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the textarea is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the textarea is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringisDisabled
isDisabledDescription
If 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
Type
booleanisInvalid
isInvalidDescription
If 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
Type
booleanisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanisRequired
isRequiredDescription
If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true
Type
booleansize
sizeType
"xs" | "sm" | "md" | "lg"Default
"md"variant
variantType
"outline" | "flushed" | "filled" | "unstyled"Default
"outline"Props#
The Textarea composes the Input component.
colorScheme
colorSchemeDescription
Color Schemes for Textarea are not implemented in the default theme. You can extend the theme to implement them.
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the textarea is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the textarea is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringisDisabled
isDisabledDescription
If 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
Type
booleanisInvalid
isInvalidDescription
If 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
Type
booleanisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanisRequired
isRequiredDescription
If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true
Type
booleansize
sizeType
"xs" | "sm" | "md" | "lg"Default
"md"variant
variantType
"outline" | "flushed" | "filled" | "unstyled"Default
"outline"