Textarea

const TextareaExample = () => {
  // Running in controlled mode (recommended)
  const [value, setValue] = React.useState('')

  const handleChange = event => {
    setValue(event.target.value)
  }

  return <Textarea placeholder="Enter a description" onChange={handleChange} value={value} />
}

render(<TextareaExample />)

const TextareaExample = () => {
  const ref = React.useRef()

  const handleSubmit = event => {
    event.preventDefault()
    if (!ref.current.value) {
      alert(`Enter a value into the Textarea and press submit`)
      return
    }

    alert(`Current Textarea value: ${ref.current.value}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <Textarea
        cols={40}
        rows={8}
        ref={ref}
        defaultValue="Set the initial state in uncontrolled mode using the defaultValue prop"
      />
      <br />
      <Button type="submit">Submit</Button>
    </form>
  )
}

render(<TextareaExample />)

<>
  <Box as="label" htmlFor="success-state" sx={{display: 'block'}}>
    Success state:
  </Box>
  <Textarea id="success-state" validationStatus="success" />
  <Box as="label" htmlFor="error-state" sx={{display: 'block', mt: 5}}>
    Error state:
  </Box>
  <Textarea id="error-state" validationStatus="error" />
</>

<>
  <Textarea disabled>This text is inactive</Textarea>
</>

<Textarea cols={40} resize="none" />

<>
  <Textarea sx={{marginBottom: 2}} />
  <p>Custom styles like `margin` and `padding` can be applied using the `sx` prop</p>
</>