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:

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

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",
  textarea_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)

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

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

<%= 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/contextual_guidance", {
    html_for: "contextual-guidance-id",
    guidance_id: "contextual-guidance",
    content: sanitize("<p>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>")
  } do %>
  <%= render "govuk_publishing_components/components/textarea", {
  textarea_id: "contextual-guidance-id",
  label: {
    text: "Title",
    bold: true
  },
  name: "described",
  rows: 2,
  describedby: "contextual-guidance"
} %>
<% end %>

With data attributes (preview) 

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "This textarea has a data attribute"
  },
  name: "with_data_attrbutes",
  data: {
    module: "some-awesome-module-here"
  }
} %>

With dir attribute (preview)

Allows the correct display of right to left languages.

By default the textarea element and the label both display text in a left to right direction.

When the right_to_left parameter of the textarea component is set to true all text desplays in a right to left direction.

Some hint text that displays in the same text direction as the label

Error: An error message that displays in the same text direction as the label 

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Some textarea text that displays right to left with a label that displays in the same direction"
  },
  hint: "Some hint text that displays in the same text direction as the label",
  error_message: "An error message that displays in the same text direction as the label",
  name: "rtl-textarea-text",
  value: "العربيَّة",
  right_to_left: true
} %>

With separate dir attributes for field and help text (preview)

Allows the correct display of right to left languages.

By default the textarea element and the label both display text in a left to right direction.

If the textarea field and the help text (label, hint and error messages) are required to display in different directions the right_to_left_help attribute can be set as false to override the right_to_left attribute.

Some hint text that displays in the same text direction as the label

Error: An error message that displays in the same text direction as the label 

<%= render "govuk_publishing_components/components/textarea", {
  label: {
    text: "Some textarea text that displays right to left with a label that displays left to right"
  },
  hint: "Some hint text that displays in the same text direction as the label",
  error_message: "An error message that displays in the same text direction as the label",
  name: "rtl-textarea-text",
  value: "العربيَّة",
  right_to_left: true,
  right_to_left_help: false
} %>