name: Form textarea
description: A textarea field and an associated label
govuk_frontend_components:
  - textarea
accessibility_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](/component-guide/label).
examples:
  default:
    data:
      label:
        text: "Can you provide more detail?"
      name: "more-detail"
  with_margin_bottom:
    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of 6 (30px).
    data:
      margin_bottom: 9
      label:
        text: "Can you provide more detail?"
      name: "more-detail"
  specific_rows:
    description: Textarea with 10 rows
    data:
      label:
        text: "Can you provide more detail?"
      name: "more-detail-rows"
      rows: 10
  with_hint:
    data:
      label:
        text: "Can you provide more detail?"
      name: "with-hint"
      hint: "Please include as much information as possible."
  with_error:
    data:
      label:
        text: "Can you provide more detail?"
      name: "more-detail-error"
      error_message: "Please could you provide more detail"
  with_error_items:
    data:
      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:
    data:
      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:
    data:
      label:
        text: "Can you provide more detail?"
      name: "more-detail-value"
      value: "More detail"
  with_extra_elements:
    data:
      label:
        text: "How about a hint below?"
      name: "more-elements"
      block: |
        <span class="govuk-hint">Here's a hint</span>
  with_maxlength:
    data:
      label:
        text: "A textarea that doesn't allow many characters"
      name: "maxlength"
      value: "You can't type more"
      maxlength: 19
  with_aria_attributes:
    description: Use `describedby` when the textarea is described by an element outside the component; for example, when used in conjunction with a [contextual guidance](/component-guide/contextual_guidance).
    embed: |
      <%= component %>
      <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>
    data:
      label:
        text: "Title"
        bold: true
      name: "described"
      rows: 2
      describedby: "contextual-guidance"