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.
Import#
import { Textarea } from "@chakra-ui/react"
Usage#
<Textarea placeholder="Here is a sample placeholder" />
Controlled Textarea#
function Example() {let [value, setValue] = React.useState("")let handleInputChange = (e) => {let inputValue = e.target.valuesetValue(inputValue)}return (<><Text mb="8px">Value: {value}</Text><Textareavalue={value}onChange={handleInputChange}placeholder="Here is a sample placeholder"size="sm"/></>)}
Resize behavior#
You can add resize prop to change the Textarea resize behavior.
function ResizeExample() {const [resize, setResize] = React.useState("horizontal")return (<><RadioGroup defaultValue={resize} onChange={setResize} mb={6}><Stack direction="row" spacing={5}><Radio value="horizontal">Horizontal</Radio><Radio value="vertical">Vertical</Radio><Radio value="none">None</Radio></Stack></RadioGroup><Textareaplaceholder="Here is a sample placeholder"size="sm"resize={resize}/></>)}
Disabled Textarea#
<Textarea isDisabled placeholder="Here is a sample placeholder" />
Invalid Textarea#
<Textarea isInvalid placeholder="Here is a sample placeholder" />
Props#
The Textarea composes the Input component.
colorScheme
colorSchemestringerrorBorderColor
errorBorderColorThe border color when the textarea is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
stringfocusBorderColor
focusBorderColorThe border color when the textarea is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
stringisDisabled
isDisabledIf 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
booleanisFullWidth
isFullWidthIf true, the textarea element will span the full width of its parent
@deprecated This component defaults to 100% width,
please use the props maxWidth or width to configure
booleanisInvalid
isInvalidIf 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
booleanisReadOnly
isReadOnlyIf true, the form control will be readonly
booleanisRequired
isRequiredIf 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
booleansize
sizestring"md"variant
variantstring"outline"