Textarea

The Textarea component allows you to easily create multi-line text inputs.

    SourceTheme source@chakra-ui/textarea

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.value
setValue(inputValue)
}
return (
<>
<Text mb='8px'>Value: {value}</Text>
<Textarea
value={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>
<Textarea
placeholder='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' />

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel