Textarea

Adapted

Default

A default textarea lets users enter multiple lines of text.

Show code

<div class="govuk-form-group">
  <label class="govuk-label" for="textarea-default">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea" id="textarea-default" name="textarea-default" rows="5"></textarea>
</div>

---
import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <InputLabel for="textarea-default">Can you provide more detail?</InputLabel>
  <Textarea id="textarea-default" name="textarea-default" rows="5" />
</FormGroup>

import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel htmlFor="textarea-default">Can you provide more detail?</InputLabel>
      <Textarea id="textarea-default" name="textarea-default" rows="5" />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <InputLabel for="textarea-default">Can you provide more detail?</InputLabel>
  <Textarea id="textarea-default" name="textarea-default" rows="5" />
</FormGroup>

import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel for="textarea-default">Can you provide more detail?</InputLabel>
      <Textarea id="textarea-default" name="textarea-default" rows="5" />
    </FormGroup>
  );
}

Subtle

Use a subtle textarea to reduce its prominence when it is not the main focus of the page.

Show code

<div class="govuk-form-group">
  <label class="govuk-label" for="textarea-subtle">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea govuk-textarea--subtle" id="textarea-subtle" name="textarea-subtle" rows="5"></textarea>
</div>

---
import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <InputLabel for="textarea-subtle">Can you provide more detail?</InputLabel>
  <Textarea id="textarea-subtle" name="textarea-subtle" rows="5" subtle />
</FormGroup>

import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel htmlFor="textarea-subtle">Can you provide more detail?</InputLabel>
      <Textarea id="textarea-subtle" name="textarea-subtle" rows="5" subtle />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <InputLabel for="textarea-subtle">Can you provide more detail?</InputLabel>
  <Textarea id="textarea-subtle" name="textarea-subtle" rows="5" subtle />
</FormGroup>

import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel for="textarea-subtle">Can you provide more detail?</InputLabel>
      <Textarea id="textarea-subtle" name="textarea-subtle" rows="5" subtle />
    </FormGroup>
  );
}

Error

An error textarea is used to indicate that the textarea has an error.

Show code

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="textarea-error">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea govuk-textarea--error" id="textarea-error" name="textarea-error" rows="5"></textarea>
</div>

---
import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup class="govuk-form-group--error">
  <InputLabel for="textarea-error">Can you provide more detail?</InputLabel>
  <Textarea id="textarea-error" name="textarea-error" rows="5" error />
</FormGroup>

import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup className="govuk-form-group--error">
      <InputLabel htmlFor="textarea-error">Can you provide more detail?</InputLabel>
      <Textarea id="textarea-error" name="textarea-error" rows="5" error />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup class="govuk-form-group--error">
  <InputLabel for="textarea-error">Can you provide more detail?</InputLabel>
  <Textarea id="textarea-error" name="textarea-error" rows="5" error />
</FormGroup>

import { FormGroup, InputLabel, Textarea } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup class="govuk-form-group--error">
      <InputLabel for="textarea-error">Can you provide more detail?</InputLabel>
      <Textarea id="textarea-error" name="textarea-error" rows="5" error />
    </FormGroup>
  );
}

When to use this component

Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.

When not to use this component

Users can find open-ended questions difficult to answer. It might be better to break up one complex question into a series of simple ones, for example where users can select from options using a Radios component.

If you need to ask an open question

Do not use the textarea component if you need to let users enter shorter answers no longer than a single line, such as a phone number or name. In this case, you should use the Text input component.