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
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
errorBorderColor
errorBorderColor
The border color when the textarea is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
string
focusBorderColor
focusBorderColor
The border color when the textarea is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
string
isDisabled
isDisabled
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
boolean
isFullWidth
isFullWidth
If 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
boolean
isInvalid
isInvalid
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
boolean
isReadOnly
isReadOnly
If true
, the form control will be readonly
boolean
isRequired
isRequired
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
boolean
size
size
"sm" | "md" | "lg" | "xs"
"md"
variant
variant
"outline" | "unstyled" | "filled" | "flushed"
"outline"