Skip to main content

Textarea examples

  • # default

    Open this example in a new tab: button 
    {
  "name": "more-detail",
  "label": {
    "text": "Can you provide more detail?"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "name": "more-detail",
  "label": {
    "text": "Can you provide more detail?"
  }
}) }}

  • # with hint

    Open this example in a new tab: button
    Don't include personal or financial information, eg your National Insurance number or credit card details. 
    {
  "name": "more-detail",
  "id": "more-detail",
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "name": "more-detail",
  "id": "more-detail",
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}) }}

  • # with error message

    Open this example in a new tab: button

    Error: You must provide an explanation 

    {
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Why can’t you provide a National Insurance number?"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Why can’t you provide a National Insurance number?"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  }
}) }}

  • # with default value

    Open this example in a new tab: button 
    {
  "id": "full-address",
  "name": "address",
  "value": "221B Baker Street\nLondon\nNW1 6XE\n",
  "label": {
    "text": "Full address"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "full-address",
  "name": "address",
  "value": "221B Baker Street\nLondon\nNW1 6XE\n",
  "label": {
    "text": "Full address"
  }
}) }}

  • # with custom rows

    Open this example in a new tab: button 
    {
  "id": "full-address",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "rows": 8
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "full-address",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "rows": 8
}) }}

  • # with label as page heading

    Open this example in a new tab: button 

    {
  "id": "textarea-with-page-heading",
  "name": "address",
  "label": {
    "text": "Full address",
    "classes": "govuk-label--l",
    "isPageHeading": true
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "textarea-with-page-heading",
  "name": "address",
  "label": {
    "text": "Full address",
    "classes": "govuk-label--l",
    "isPageHeading": true
  }
}) }}

  • # id

    Open this example in a new tab: button 
    {
  "id": "textarea-id",
  "name": "test-name",
  "label": {
    "text": "With custom id"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "textarea-id",
  "name": "test-name",
  "label": {
    "text": "With custom id"
  }
}) }}

  • # classes

    Open this example in a new tab: button 
    {
  "id": "with-classes",
  "name": "with-classes",
  "label": {
    "text": "With classes"
  },
  "classes": "app-textarea--custom-modifier"
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "with-classes",
  "name": "with-classes",
  "label": {
    "text": "With classes"
  },
  "classes": "app-textarea--custom-modifier"
}) }}

  • # attributes

    Open this example in a new tab: button 
    {
  "id": "with-attributes",
  "name": "with-attributes",
  "label": {
    "text": "With attributes"
  },
  "attributes": {
    "data-attribute": "my data value"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "with-attributes",
  "name": "with-attributes",
  "label": {
    "text": "With attributes"
  },
  "attributes": {
    "data-attribute": "my data value"
  }
}) }}

  • # with describedBy

    Open this example in a new tab: button 
    {
  "id": "with-describedby",
  "name": "with-describedby",
  "label": {
    "text": "With describedBy"
  },
  "describedBy": "test-target-element"
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "with-describedby",
  "name": "with-describedby",
  "label": {
    "text": "With describedBy"
  },
  "describedBy": "test-target-element"
}) }}

  • # with hint and described by

    Open this example in a new tab: button
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. 
    {
  "id": "with-hint-describedby",
  "name": "with-hint-describedby",
  "label": {
    "text": "With hint and describedBy"
  },
  "describedBy": "test-target-element",
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "with-hint-describedby",
  "name": "with-hint-describedby",
  "label": {
    "text": "With hint and describedBy"
  },
  "describedBy": "test-target-element",
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  }
}) }}

  • # with error message and described by

    Open this example in a new tab: button

    Error: Error message 

    {
  "name": "textarea-with-error",
  "label": {
    "text": "Textarea with error"
  },
  "describedBy": "test-target-element",
  "id": "textarea-with-error",
  "errorMessage": {
    "text": "Error message"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "name": "textarea-with-error",
  "label": {
    "text": "Textarea with error"
  },
  "describedBy": "test-target-element",
  "id": "textarea-with-error",
  "errorMessage": {
    "text": "Error message"
  }
}) }}

  • # with hint and error message

    Open this example in a new tab: button
    Hint

    Error: Error message 

    {
  "id": "with-hint-error",
  "name": "with-hint-error",
  "label": {
    "text": "With hint and error"
  },
  "errorMessage": {
    "text": "Error message"
  },
  "hint": {
    "text": "Hint"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "with-hint-error",
  "name": "with-hint-error",
  "label": {
    "text": "With hint and error"
  },
  "errorMessage": {
    "text": "Error message"
  },
  "hint": {
    "text": "Hint"
  }
}) }}

  • # with hint, error message and described by

    Open this example in a new tab: button
    Hint

    Error: Error message 

    {
  "id": "with-hint-error-describedby",
  "name": "with-hint-error-describedby",
  "label": {
    "text": "With hint, error and describedBy"
  },
  "describedBy": "test-target-element",
  "errorMessage": {
    "text": "Error message"
  },
  "hint": {
    "text": "Hint"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "with-hint-error-describedby",
  "name": "with-hint-error-describedby",
  "label": {
    "text": "With hint, error and describedBy"
  },
  "describedBy": "test-target-element",
  "errorMessage": {
    "text": "Error message"
  },
  "hint": {
    "text": "Hint"
  }
}) }}

  • # with optional form-group classes

    Open this example in a new tab: button 
    {
  "id": "textarea-with-page-heading",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "formGroup": {
    "classes": "extra-class"
  }
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "textarea-with-page-heading",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "formGroup": {
    "classes": "extra-class"
  }
}) }}

  • # with autocomplete attribute

    Open this example in a new tab: button 
    {
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "autocomplete": "street-address"
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "autocomplete": "street-address"
}) }}

  • # with spellcheck enabled

    Open this example in a new tab: button 
    {
  "label": {
    "text": "Spellcheck is enabled"
  },
  "id": "textarea-with-spellcheck-enabled",
  "name": "spellcheck",
  "spellcheck": true
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "label": {
    "text": "Spellcheck is enabled"
  },
  "id": "textarea-with-spellcheck-enabled",
  "name": "spellcheck",
  "spellcheck": true
}) }}

  • # with spellcheck disabled

    Open this example in a new tab: button 
    {
  "label": {
    "text": "Spellcheck is disabled"
  },
  "id": "textarea-with-spellcheck-disabled",
  "name": "spellcheck",
  "spellcheck": false
}
    
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "label": {
    "text": "Spellcheck is disabled"
  },
  "id": "textarea-with-spellcheck-disabled",
  "name": "spellcheck",
  "spellcheck": false
}) }}