Textarea

import { Textarea } from '@chakra-ui/react'

<Textarea placeholder='Here is a sample placeholder' />

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'
      />
    </>
  )
}

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}
      />
    </>
  )
}

<Textarea isDisabled placeholder='Here is a sample placeholder' />

<Textarea isInvalid placeholder='Here is a sample placeholder' />

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

const outline = defineStyle({
  border: '2px dashed', // change the appearance of the border
  borderRadius: 0, // remove the border radius
  fontWeight: 'semibold', // change the font weight
})

export const textareaTheme = defineStyleConfig({
  variants: { outline },
})

import { extendTheme } from '@chakra-ui/react'
import { textareaTheme } from './components/textarea'

export const theme = extendTheme({
  components: { Textarea: textareaTheme },
})

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

const xl = defineStyle({
  fontSize: 'xl',
  px: '6',
  h: '16',
  borderRadius: 'md',
})

export const textareaTheme = defineStyleConfig({
  sizes: { xl },
})

// Now we can use the new `xl` size
<Textarea size="xl">...</Textarea>

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

const brandPrimary = defineStyle({
  background: 'orange.500',
  color: 'white',
  fontFamily: 'serif',
  fontWeight: 'normal',

  // let's also provide dark mode alternatives
  _dark: {
    background: 'orange.300',
    color: 'orange.800',
  }
})

export const textareaTheme = defineStyleConfig({
  variants: { brandPrimary },
})

// Now we can use the new `brandPrimary` variant
<Textarea variant="brandPrimary">...</Textarea>

import { defineStyleConfig } from '@chakra-ui/react'

export const textareaTheme = defineStyleConfig({
  defaultProps: {
    size: 'lg',
    variant: 'outline',
    colorScheme: 'brand',
  },
})

// This saves you time, instead of manually setting the size and
// variant every time you use the textarea component:
<Textarea size="lg" variant="outline">...</Textarea>