1. Government Frontend Component Guide
  2. Form textarea

Component

Form textarea

A textarea field and an associated label

How it looks (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:

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 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)

Error: 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)

Error: 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 value (preview)

<%= 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 %>
  <span class="govuk-hint">Here's a hint</span>
<% end %>

With maxlength (preview)

<%= 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
} %>