The visual color appearance of the component
Textarea
The Textarea component allows you to easily create multi-line text inputs.
Props#
The Textarea composes the Input component.
colorScheme
colorSchemeDescription
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"errorBorderColor
errorBorderColorDescription
The border color when the textarea is invalid. Use color keys in `theme.colors`
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the textarea is focused. Use color keys in `theme.colors`
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
sizeDescription
The size of the Textarea
Type
"xs" | "sm" | "md" | "lg"Default
mdvariant
variantDescription
The variant of the Textarea
Type
"outline" | "flushed" | "filled" | "unstyled"Default
outline