Textarea Field

Related components

TextareaField renders a Textarea with a Label, an optional description and prompt, and an error message. It is the preferred way to ask for several lines of text.

TextareaField accepts all the props of Textarea and passes them on. It is at least 96px tall, and people can drag it taller. It has no sizes.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <TextareaField
      name="notes"
      label="Notes about this pupil"
      description="Only teachers at your school can see these notes."
      appearance="modern"
      className="w-96"
    />
  </Form>
</div>

Appearance

standard (default) has a white background and a grey-700 border. modern has a filled background and no border.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <TextareaField label="Notes about this pupil" placeholder="For example, prefers to sit at the front" name="standard" appearance="standard" />
      <TextareaField label="Notes about this pupil" placeholder="For example, prefers to sit at the front" name="modern" appearance="modern" />
    </div>
  </Form>
</div>

Theme

With appearance="modern", use theme="grey" on white surfaces and theme="white" on grey surfaces.

<Form onSubmit={() => {}}>
  <div className="flex flex-col gap-4">
    <div className="w-80 rounded-md border border-grey-200 bg-white p-6">
      <TextareaField label="Notes about this pupil" placeholder="For example, prefers to sit at the front" name="grey" appearance="modern" theme="grey" />
    </div>
    <div className="w-80 rounded-md bg-grey-100 p-6">
      <TextareaField label="Notes about this pupil" placeholder="For example, prefers to sit at the front" name="white" appearance="modern" theme="white" />
    </div>
  </div>
</Form>

States

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}} appearance="modern">
    <div className="flex w-80 flex-col gap-6">
      <TextareaField name="placeholder" label="Placeholder" placeholder="For example, prefers to sit at the front" />
      <TextareaField name="filled" label="Filled" defaultValue="Prefers to sit at the front. Responds well to praise." />
      <TextareaField name="readonly" label="Read-only" defaultValue="Prefers to sit at the front." readOnly />
      <TextareaField name="disabled" label="Disabled" defaultValue="Prefers to sit at the front." disabled />
    </div>
  </Form>
</div>

Error

const ShowErrors = ({ trigger }) => {
  React.useEffect(() => {
    trigger()
  }, [trigger])
  return null
}

render(
  <Form onSubmit={() => {}}>
    {({ trigger }) => (
      <div className="flex w-96 flex-col gap-6 rounded-md bg-white p-8">
        <TextareaField
          name="standard"
          label="Reason for absence (standard)"
          validation={{ required: 'Enter a reason for the absence' }}
        />
        <TextareaField
          name="modern"
          label="Reason for absence (modern)"
          appearance="modern"
          validation={{ required: 'Enter a reason for the absence' }}
        />
        <ShowErrors trigger={trigger} />
      </div>
    )}
  </Form>
)