Textarea

const TextareaExample = () => {
  // Running in controlled mode (recommended)
  const [value, setValue] = React.useState(
    'This value was initially set through state.',
  )

  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 /> <br />
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </form>
  )
}

render(<TextareaExample />)

<Stack direction="vertical">
  <FormControl validationStatus="success">
    <FormControl.Label>Success state</FormControl.Label>
    <Textarea />
    <FormControl.Validation>This is a success message</FormControl.Validation>
  </FormControl>
</Stack>
<Stack direction="vertical">
  <FormControl validationStatus="error">
    <FormControl.Label>Error state</FormControl.Label>
    <Textarea />
    <FormControl.Validation>This is an error message</FormControl.Validation>
  </FormControl>
</Stack>

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

<Textarea resize="none" />