Basic

<TextArea
  name="basic-text-area"
  placeholder="Start typing..."
  onChange={console.log}
/>

Required

Note*
<TextArea
  name="required-text-area"
  title="Note"
  placeholder="Start typing..."
  onChange={console.log}
  required={true}
/>

With error

There was an error
Show error
<Toggler initial={true}>
  {({ on, toggle }) => (
    <>
      <TextArea
        name="error-text-area"
        error={on ? "There was an error" : null}
        defaultValue="This is some text"
        onChange={console.log}
      />
      <Spacer mb={3} />
      <Flex alignItems="center">
        <Checkbox selected={on} onSelect={toggle} />
        <Serif size="3">Show error</Serif>
      </Flex>
    </>
  )}
</Toggler>

With title

Note
There was an error
<TextArea
  name="title-text-area"
  title="Note"
  error="There was an error"
  defaultValue="This is some text"
  onChange={console.log}
/>

With title and description

Note
For your security do not share personal information.
<TextArea
  name="description-text-area"
  title="Note"
  description="For your security do not share personal information."
  defaultValue="This is some text"
  onChange={console.log}
/>

With character limit

Note
For your security do not share personal information.
17 / 200 max
<TextArea
  name="limited-text-area"
  title="Note"
  description="For your security do not share personal information."
  defaultValue="This is some text"
  characterLimit={200}
  onChange={console.log}
/>

With character limit and error

Further details
Please provide any further pertinent details to help us assess your case.
There was an error
17 / 322 max
Show error
<Toggler initial={true}>
  {({ on, toggle }) => (
    <>
      <TextArea
        name="limiting-with-error-text-area"
        error={on ? "There was an error" : null}
        defaultValue="This is some text"
        characterLimit="322"
        title="Further details"
        description="Please provide any further pertinent details to help us assess your case."
        onChange={console.log}
      />
      <Spacer mb={3} />
      <Flex alignItems="center">
        <Checkbox selected={on} onSelect={toggle} />
        <Serif size="3">Show error</Serif>
      </Flex>
    </>
  )}
</Toggler>
On this page
Basic
Required
With error
With title
With title and description
With character limit
With character limit and error