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
(string & {})
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
"xs" | "sm" | "md" | "lg"
"md"
variant
variant
"outline" | "flushed" | "filled" | "unstyled"
"outline"