Component

Form textarea

A textarea field and an associated label

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Can you provide more detail?"
  },
  name: "more-detail"
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

• Textarea

Accessibility acceptance criteria

The component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• be usable with touch
• indicate when they have focus
• be recognisable as form textarea elements
• have correctly associated labels

Labels use the label component.

Other examples

With id attribute (preview)

An id can be passed for the textarea. By default one is randomly generated.

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "What is the nature of your medical emergency?"
  },
  name: "emergency-name",
  id: "emergency-id"
} %>

With margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to a margin bottom of 6 (30px).

<%= render "govuk_publishing_components/components/textarea", {
  margin_bottom: 9,
  label: {
    text: "Can you provide more detail?"
  },
  name: "more-detail"
} %>

Specific rows (preview)

Textarea with 10 rows

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Can you provide more detail?"
  },
  name: "more-detail-rows",
  rows: 10
} %>

With hint (preview)

Please include as much information as possible.

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Can you provide more detail?"
  },
  name: "with-hint",
  hint: "Please include as much information as possible."
} %>

With error (preview)

Please could you provide more detail

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Can you provide more detail?"
  },
  name: "more-detail-error",
  error_message: "Please could you provide more detail"
} %>

With error items (preview)

Descriptive link to the question with an error 1
Descriptive link to the question with an error 2

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Can you provide more detail?"
  },
  name: "more-detail-error",
  error_items: [
    {
      text: "Descriptive link to the question with an error 1",
      href: "#example-error-1"
    },
    {
      text: "Descriptive link to the question with an error 2",
      href: "#example-error-2"
    }
  ]
} %>

With label as page heading (preview)

Please include as much information as possible.

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    is_page_heading: true,
    heading_size: "xl",
    text: "Can you provide more detail?"
  },
  hint: "Please include as much information as possible.",
  name: "more-detail-error"
} %>

With value (preview)

More detail

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Can you provide more detail?"
  },
  name: "more-detail-value",
  value: "More detail"
} %>

With extra elements (preview)

Here's a hint

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "How about a hint below?"
  },
  name: "more-elements"
} do %>
  <div class="govuk-hint">Here's a hint</div>
<% end %>

With maxlength (preview)

You can't type more

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "A textarea that doesn't allow many characters"
  },
  name: "maxlength",
  value: "You can't type more",
  maxlength: 19
} %>

With aria attributes (preview)

Use describedby when the textarea is described by an element outside the component; for example, when used in conjunction with a contextual guidance.

The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Title",
    bold: true
  },
  name: "described",
  rows: 2,
  describedby: "contextual-guidance"
} %>
<p class="govuk-body" id="contextual-guidance">The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>