`Textarea` is an input for long text. If you need to use it as part of a form (with `useForm`), prefer [`TextareaField`](#/Components/TextareaField) instead.

<br>

### Styling

If you are looking to add space between elements, use the `Stack` component instead of applying a margin to the Textarea. For example:

```html
<Stack spacing="4">
  <textarea />
  <SomeOtherElement />
</Stack>
```

<br>
### Examples

```jsx
import CKIcon from "../ck-icon"
const [value, setValue] = React.useState("This is the initial value")
const [value2, setValue2] = React.useState("")

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

const handleChange2 = (event) => {
  setValue2(event.target.value)
}

;<>
  <Textarea placeholder="A textarea that is not resizable" />
  <Textarea value={value} onChange={handleChange} />
  <Textarea
    placeholder="A textarea that is resizable horizontally"
    resize="horizontal"
  />
  <Textarea
    placeholder="A textarea that is resizable vertically"
    resize="vertical"
  />
  <Textarea
    placeholder="A disabled textarea that is not resizable"
    disabled={true}
  />
  <Textarea
    placeholder="A textarea that is resizable bothways and has a starting height of 5 rows"
    resize="both"
    rows={5}
  />
  <Textarea placeholder="A textarea with a label" label="Alt Text" />

  <hr />

  <Textarea
    placeholder="A textarea with a label that is not a string"
    label={
      <div className="bg-gray-200 rounded p-2">
        <CKIcon name="bolt" />
        My custom JSX
      </div>
    }
  />

  <hr />

  <Textarea
    placeholder="A textarea with a label, info, and message"
    label="Bio"
    info="Optional"
    message="Must be between 50 and 500 characters"
  />

  <hr />

  <Textarea
    placeholder="This triggers an error state when the value is convertkit"
    label="Type 'convertkit'"
    value={value2}
    onChange={handleChange2}
    state={
      value2 === "convertkit"
        ? { name: "error", message: "The value cannot be 'convertkit'" }
        : null
    }
  />

  <hr />

  <Textarea
    placeholder="A textarea with a label showing an error state"
    label="Description"
    state={{
      name: "error",
      message: "This is an error message",
    }}
  />

  <hr />

  <Textarea
    placeholder="A textarea with a label showing a success state"
    label="Description"
    state={{
      name: "success",
      message: "This is a success message",
    }}
  />
</>
```
