Textarea – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Textarea – GOV.UK Design System</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#0b0c0c"> <link rel="icon" sizes="48x48" href="/assets/images/favicon.ico"> <link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml"> <link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c"> <link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png"> <link rel="manifest" href="/assets/manifest.json"> <meta name="og:title" content="Textarea"> <meta name="description" content="Help users provide detailed information using the textarea component"> <meta name="og:description" content="Help users provide detailed information using the textarea component"> <link rel="canonical" href="https://design-system.service.gov.uk/components/textarea/"> <link href="/stylesheets/main-5d98294379237e7335d379f1004c3034.css" rel="stylesheet" media="all"> <meta property="og:image" content="https://design-system.service.gov.uk/assets/images/govuk-opengraph-image.png"> </head> <body class="govuk-template__body" data-module="app-navigation"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <a id="top"></a> <script> /** * If cookie policy changes and/or the user preferences object format needs to * change, bump this version up afterwards. The user should then be shown the * banner again to consent to the new policy. * * Note that because isValidCookieConsent checks that the version in the user's * cookie is equal to or greater than this number, you should be careful to * check backwards compatibility when changing the object format. */ window.GDS_CONSENT_COOKIE_VERSION = 2; </script> <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on GOV.UK Design System" hidden data-module="govuk-cookie-banner" data-cookie-category="analytics"> <div class="govuk-cookie-banner__message app-width-container js-cookie-banner-message govuk-width-container"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h2 class="govuk-cookie-banner__heading govuk-heading-m"> Cookies on GOV.UK Design System </h2> <div class="govuk-cookie-banner__content"> <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p> <p class="govuk-body">We also use essential cookies to remember if you’ve accepted analytics cookies.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-accept" data-module="govuk-button"> Accept analytics cookies </button> <button type="button" class="govuk-button js-cookie-banner-reject" data-module="govuk-button"> Reject analytics cookies </button> <a class="govuk-link" href="/cookies/">View cookies</a> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-accept app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--accept" data-module="govuk-button"> Hide cookie message </button> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-reject app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time.</p> </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--reject" data-module="govuk-button"> Hide cookie message </button> </div> </div> </div> <script> (function () { // Skip early setup when cookie banner component is not supported if (!('noModule' in HTMLScriptElement.prototype)) { return } /** * Check the cookie preferences object. * * If the consent object is not present, malformed, or incorrect version, * returns false, otherwise returns true. * * This is also duplicated in cookie-functions.js - the two need to be kept in sync */ function isValidConsentCookie (options) { return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION) } function categoryIsNull (options) { return (options && options.analytics === null) } // Don't show the banner on the cookies page if (window.location.pathname !== "/cookies/") { // Show the banner if there is no consent cookie or if it is outdated var currentConsentCookie = document.cookie.match(new RegExp('(^| )design_system_cookies_policy=([^;]+)')) const cookieData = currentConsentCookie && JSON.parse(currentConsentCookie[2]); const cookieNotSet = (!currentConsentCookie || !isValidConsentCookie(cookieData)) const categoryNotSet = isValidConsentCookie(cookieData) && categoryIsNull(cookieData) if (cookieNotSet || categoryNotSet) { var cookieBanner = document.querySelector("[data-cookie-category='analytics']") cookieBanner.removeAttribute('hidden') } } })() </script> <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> <header class="govuk-header govuk-header--full-width-border" role="banner"> <div class="govuk-header__container app-width-container"> <div class="govuk-header__logo app-header-logo"> <a href="/" class="govuk-header__link govuk-header__link--homepage"> <svg focusable="false" role="img" class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 30" height="30" width="148" aria-label="GOV.UK" > <title>GOV.UK</title> <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path> </svg> <span class="govuk-header__product-name"> Design System </span> </a> </div> <div class="app-site-search" data-module="app-search" data-search-index="/search-index-0864382ee8f73428a07ab1782893f578.json"> <label class="govuk-visually-hidden" for="app-site-search__input">Search Design system</label> <a class="app-site-search__link govuk-link" href="/sitemap/">Sitemap</a> </div> <button type="button" class="govuk-header__menu-button app-navigation__menu-button js-app-navigation__toggler" aria-controls="app-navigation" hidden> Menu </button> </div> </header> <nav id="app-navigation" class="app-navigation js-app-navigation govuk-clearfix" role="navigation" aria-labelledby="app-navigation-heading"> <h2 class="govuk-visually-hidden" id="app-navigation-heading">Menu</h2> <ul class="app-navigation__list app-width-container"> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/get-started/"> Get started </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Get started </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Get started" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/"> Get started overview </a> </li> <li> <h3 class="app-navigation__theme">Setup guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/prototyping/"> Prototyping </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/production/"> Production </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How to guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/labels-legends-headings/"> Making labels and legends headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/extending-and-modifying-components/"> Extending and modifying components in production </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/focus-states/"> Understanding focus state styles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/new-type-scale/"> Updating your service to use the new type scale </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/styles/"> Styles </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Styles </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Styles" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/"> Styles overview </a> </li> <li> <h3 class="app-navigation__theme">Page structure</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/page-template/"> Page template </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/layout/"> Layout </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/spacing/"> Spacing </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/section-break/"> Section break </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Typography</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/typeface/"> Typeface </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/type-scale/"> Type scale </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/headings/"> Headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/paragraphs/"> Paragraphs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/links/"> Links </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/lists/"> Lists </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/font-override-classes/"> Font override classes </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Visual elements</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/colour/"> Colour </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/images/"> Images </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item app-navigation__list-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/components/"> Components </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Components </button>  <ul class="app-navigation__subnav js-app-navigation__subnav app-navigation__subnav--active" aria-label="Components" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/"> Components overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-navigation__subnav-item app-navigation__subnav-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/patterns/"> Patterns </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Patterns </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Patterns" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/"> Patterns overview </a> </li> <li> <h3 class="app-navigation__theme">Ask users for…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/addresses/"> Addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/bank-details/"> Bank details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/dates/"> Dates </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/email-addresses/"> Email addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/equality-information/"> Equality information </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/gender-or-sex/"> Gender or sex </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/names/"> Names </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/national-insurance-numbers/"> National Insurance numbers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/passwords/"> Passwords </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/payment-card-details/"> Payment card details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/phone-numbers/"> Phone numbers </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Help users to…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-a-service-is-suitable/"> Check a service is suitable </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-answers/"> Check answers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/complete-multiple-tasks/"> Complete multiple tasks </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-a-phone-number/"> Confirm a phone number </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-an-email-address/"> Confirm an email address </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/contact-a-department-or-service-team/"> Contact a department or service team </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-a-username/"> Create a username </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-accounts/"> Create accounts </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/exit-a-page-quickly/"> Exit a page quickly </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/navigate-a-service/"> Navigate a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/start-using-a-service/"> Start using a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/validation/"> Recover from validation errors </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Pages</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirmation-pages/"> Confirmation pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/cookies-page/"> Cookies page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/page-not-found-pages/"> Page not found pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/problem-with-the-service-pages/"> There is a problem with the service pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/question-pages/"> Question pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/service-unavailable-pages/"> Service unavailable pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/step-by-step-navigation/"> Step by step navigation </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/community/"> Community </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Community </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Community" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/"> Community overview </a> </li> <li> <h3 class="app-navigation__theme">What we’re working on</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/upcoming-components-patterns/"> Upcoming components and patterns </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/roadmap/"> Roadmap </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Ways to get involved</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/share-research-findings/"> Share findings about your users </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-component-or-pattern/"> Propose a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/develop-a-component-or-pattern/"> Develop a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-content-change-using-github/"> Propose a content change using GitHub </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How we work</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/community-principles/"> Community principles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/contribution-criteria/"> Contribution criteria </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-working-group/"> Design System working group </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/blogs-talks-podcasts/"> Blog posts, videos and podcasts </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Resources</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/resources-and-tools/"> Resources and tools </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Events and workshops</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day/"> Design System Day Events </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2022/"> Design System Day 2022 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2023/"> Design System Day 2023 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2024/"> Design System Day 2024 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/code-of-conduct/"> Code of Conduct </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/accessibility/"> Accessibility </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Accessibility </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Accessibility" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/"> Accessibility overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/wcag-2.2/"> Changes to the Design System to meet WCAG 2.2 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/accessibility-strategy/"> Accessibility strategy </a> </li> </ul> </li> </ul> </li> </ul> </nav> <div class="app-split-pane app-width-container"> <div class="app-split-pane__nav">  <nav class="app-subnav" aria-labelledby="app-subnav-heading"> <h2 class="govuk-visually-hidden" id="app-subnav-heading">Pages in this section</h2> <ul class="app-subnav__section"> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-subnav__section-item app-subnav__section-item--current"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/" aria-current="page"> Textarea </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </nav> </div> <div class="app-split-pane__content"> <main id="main-content" class="app-content" role="main"> <span class="govuk-caption-xl"> Components </span> <h1 class="govuk-heading-xl"> Textarea </h1> <div class="app-prose-scope"> <div class="app-example-wrapper" id="textarea-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/textarea/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: textarea</span> </a> </div> <iframe title="Textarea example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/textarea/default/index.html" loading="eager"></iframe> </div> <span id="options-textarea-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-example-html" role="tab" aria-controls="textarea-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-example-nunjucks" role="tab" aria-controls="textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-example-html" aria-controls="textarea-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label-wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-label--l"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"more-detail"</span>></span> Can you provide more detail? <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> Do not include personal or financial information, like your National Insurance number or credit card details <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-textarea"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"moreDetail"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"more-detail-hint"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#textarea-example-nunjucks" aria-controls="textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-textarea-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-textarea-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The ID of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The name of the textarea, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">spellcheck</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional number of textarea rows (default is 5 rows). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional initial value of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If <code>true</code>, textarea will be disabled. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">described<wbr>By</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">label</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> <strong>Required.</strong> The label used by the textarea component. <a href="#options-textarea-example--label"> See macro options for label</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">hint</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a hint to the textarea component. <a href="#options-textarea-example--hint"> See macro options for hint</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">error<wbr>Message</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add an error message to the textarea component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>. <a href="/components/error-message/#options-error-message-example">See macro options for error<wbr>Message</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">form<wbr>Group</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Additional options for the form group containing the textarea component. <a href="#options-textarea-example--form-group"> See macro options for form<wbr>Group</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocomplete</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>"street-address"</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the textarea. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-example--form-group"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>form<wbr>Group</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the form group (for example to show error state for the whole group). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the form group. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">before<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add before the textarea used by the textarea component. <a href="#options-textarea-example--form-group-before-input"> See macro options for form<wbr>Group before<wbr>Input</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">after<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add after the textarea used by the textarea component. <a href="#options-textarea-example--form-group-after-input"> See macro options for form<wbr>Group after<wbr>Input</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-example--form-group-before-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>before<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-example--form-group-after-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>after<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-example--label"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>label</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">for</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The value of the <code>for</code> attribute, the ID of the input the label is associated with. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Page<wbr>Heading</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the label also acts as the heading for the page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the label tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the label tag. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-example--hint"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>hint</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional ID attribute to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the hint span tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/textarea/macro.njk"</span> <span class="hljs-keyword">import</span> govukTextarea %} {{ <span class="hljs-title function_">govukTextarea</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">"moreDetail"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"more-detail"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Can you provide more detail?"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-label--l"</span>, <span class="hljs-attr">isPageHeading</span>: <span class="hljs-literal">true</span> }, <span class="hljs-attr">hint</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Do not include personal or financial information, like your National Insurance number or credit card details"</span> } }) }}</code></pre> </div> </div> </div> <h2 id="when-to-use-this-component">When to use this component</h2> <p>Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.</p> <h2 id="when-not-to-use-this-component">When not to use this component</h2> <p>Users can find open-ended questions difficult to answer. It might be better to break up one complex question into a series of simple ones, for example where users can select from options using a <a href="/components/radios/">Radios component</a>.</p> <h3 id="if-you-need-to-ask-an-open-question">If you need to ask an open question</h3> <p>Do not use the textarea component if you need to let users enter shorter answers no longer than a single line, such as a phone number or name. In this case, you should use the <a href="/components/text-input/">Text input component</a>.</p> <h2 id="how-it-works">How it works</h2> <p>You must label textareas. Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the textarea.</p> <p>Labels must be aligned above the textarea they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.</p> <p>There are 2 ways to use the textarea component. You can use HTML or, if you’re using <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> or the <a href="https://prototype-kit.service.gov.uk">GOV.UK Prototype Kit</a>, you can use the Nunjucks macro.</p> <div class="app-example-wrapper" id="textarea-second-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/textarea/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: textarea second</span> </a> </div> <iframe title="Textarea second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/textarea/default/index.html" loading="lazy"></iframe> </div> <span id="options-textarea-second-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-second-example-html" role="tab" aria-controls="textarea-second-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-second-example-nunjucks" role="tab" aria-controls="textarea-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-second-example-html" aria-controls="textarea-second-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-second-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label-wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-label--l"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"more-detail"</span>></span> Can you provide more detail? <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> Do not include personal or financial information, like your National Insurance number or credit card details <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-textarea"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"moreDetail"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"more-detail-hint"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#textarea-second-example-nunjucks" aria-controls="textarea-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-second-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-textarea-second-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-textarea-second-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The ID of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The name of the textarea, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">spellcheck</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional number of textarea rows (default is 5 rows). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional initial value of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If <code>true</code>, textarea will be disabled. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">described<wbr>By</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">label</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> <strong>Required.</strong> The label used by the textarea component. <a href="#options-textarea-second-example--label"> See macro options for label</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">hint</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a hint to the textarea component. <a href="#options-textarea-second-example--hint"> See macro options for hint</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">error<wbr>Message</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add an error message to the textarea component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>. <a href="/components/error-message/#options-error-message-example">See macro options for error<wbr>Message</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">form<wbr>Group</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Additional options for the form group containing the textarea component. <a href="#options-textarea-second-example--form-group"> See macro options for form<wbr>Group</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocomplete</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>"street-address"</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the textarea. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-second-example--form-group"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>form<wbr>Group</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the form group (for example to show error state for the whole group). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the form group. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">before<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add before the textarea used by the textarea component. <a href="#options-textarea-second-example--form-group-before-input"> See macro options for form<wbr>Group before<wbr>Input</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">after<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add after the textarea used by the textarea component. <a href="#options-textarea-second-example--form-group-after-input"> See macro options for form<wbr>Group after<wbr>Input</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-second-example--form-group-before-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>before<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-second-example--form-group-after-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>after<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-second-example--label"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>label</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">for</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The value of the <code>for</code> attribute, the ID of the input the label is associated with. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Page<wbr>Heading</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the label also acts as the heading for the page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the label tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the label tag. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-second-example--hint"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>hint</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional ID attribute to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the hint span tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/textarea/macro.njk"</span> <span class="hljs-keyword">import</span> govukTextarea %} {{ <span class="hljs-title function_">govukTextarea</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">"moreDetail"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"more-detail"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Can you provide more detail?"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-label--l"</span>, <span class="hljs-attr">isPageHeading</span>: <span class="hljs-literal">true</span> }, <span class="hljs-attr">hint</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Do not include personal or financial information, like your National Insurance number or credit card details"</span> } }) }}</code></pre> </div> </div> </div> <h3 id="use-appropriately-sized-textareas">Use appropriately-sized textareas</h3> <p>Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by specifying the <code>rows</code> attribute.</p> <div class="app-example-wrapper" id="textarea-appropriately-sized-with-rows-textarea-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/textarea/specifying-rows/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: textarea appropriately-sized with rows – textarea</span> </a> </div> <iframe title="Textarea appropriately-sized with rows – Textarea example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/textarea/specifying-rows/index.html" loading="lazy"></iframe> </div> <span id="options-textarea-appropriately-sized-with-rows-textarea-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-appropriately-sized-with-rows-textarea-example-html" role="tab" aria-controls="textarea-appropriately-sized-with-rows-textarea-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-appropriately-sized-with-rows-textarea-example-nunjucks" role="tab" aria-controls="textarea-appropriately-sized-with-rows-textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-appropriately-sized-with-rows-textarea-example-html" aria-controls="textarea-appropriately-sized-with-rows-textarea-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-appropriately-sized-with-rows-textarea-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label-wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-label--l"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"more-detail"</span>></span> Can you provide more detail? <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> Do not include personal or financial information, like your National Insurance number or credit card details <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-textarea"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"moreDetail"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"more-detail-hint"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#textarea-appropriately-sized-with-rows-textarea-example-nunjucks" aria-controls="textarea-appropriately-sized-with-rows-textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-appropriately-sized-with-rows-textarea-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-textarea-appropriately-sized-with-rows-textarea-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-textarea-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The ID of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The name of the textarea, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">spellcheck</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional number of textarea rows (default is 5 rows). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional initial value of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If <code>true</code>, textarea will be disabled. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">described<wbr>By</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">label</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> <strong>Required.</strong> The label used by the textarea component. <a href="#options-textarea-appropriately-sized-with-rows-textarea-example--label"> See macro options for label</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">hint</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a hint to the textarea component. <a href="#options-textarea-appropriately-sized-with-rows-textarea-example--hint"> See macro options for hint</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">error<wbr>Message</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add an error message to the textarea component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>. <a href="/components/error-message/#options-error-message-example">See macro options for error<wbr>Message</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">form<wbr>Group</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Additional options for the form group containing the textarea component. <a href="#options-textarea-appropriately-sized-with-rows-textarea-example--form-group"> See macro options for form<wbr>Group</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocomplete</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>"street-address"</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the textarea. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-textarea-example--form-group"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>form<wbr>Group</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the form group (for example to show error state for the whole group). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the form group. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">before<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add before the textarea used by the textarea component. <a href="#options-textarea-appropriately-sized-with-rows-textarea-example--form-group-before-input"> See macro options for form<wbr>Group before<wbr>Input</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">after<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add after the textarea used by the textarea component. <a href="#options-textarea-appropriately-sized-with-rows-textarea-example--form-group-after-input"> See macro options for form<wbr>Group after<wbr>Input</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-textarea-example--form-group-before-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>before<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-textarea-example--form-group-after-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>after<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-textarea-example--label"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>label</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">for</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The value of the <code>for</code> attribute, the ID of the input the label is associated with. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Page<wbr>Heading</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the label also acts as the heading for the page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the label tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the label tag. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-textarea-example--hint"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>hint</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional ID attribute to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the hint span tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/textarea/macro.njk"</span> <span class="hljs-keyword">import</span> govukTextarea %} {{ <span class="hljs-title function_">govukTextarea</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">"moreDetail"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"more-detail"</span>, <span class="hljs-attr">rows</span>: <span class="hljs-string">"8"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Can you provide more detail?"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-label--l"</span>, <span class="hljs-attr">isPageHeading</span>: <span class="hljs-literal">true</span> }, <span class="hljs-attr">hint</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Do not include personal or financial information, like your National Insurance number or credit card details"</span> } }) }}</code></pre> </div> </div> </div> <h3 id="do-not-disable-copy-and-paste">Do not disable copy and paste</h3> <p>Users will often need to copy and paste information into a textarea, so do not stop them from doing this.</p> <h3 id="if-youre-asking-more-than-one-question-on-the-page">If you’re asking more than one question on the page</h3> <p>If you’re asking more than one question on the page, do not set the contents of the <code><label></code> as the page heading. Read more about <a href="/patterns/question-pages/#asking-multiple-questions-on-a-page">asking multiple questions on Question pages</a>.</p> <div class="app-example-wrapper" id="textarea-without-a-heading-textarea-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/textarea/without-heading/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: textarea without a heading – textarea</span> </a> </div> <iframe title="Textarea without a heading – Textarea example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/textarea/without-heading/index.html" loading="lazy"></iframe> </div> <span id="options-textarea-without-a-heading-textarea-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-without-a-heading-textarea-example-html" role="tab" aria-controls="textarea-without-a-heading-textarea-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-without-a-heading-textarea-example-nunjucks" role="tab" aria-controls="textarea-without-a-heading-textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-without-a-heading-textarea-example-html" aria-controls="textarea-without-a-heading-textarea-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-without-a-heading-textarea-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"more-detail"</span>></span> Can you provide more detail? <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-textarea"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"moreDetail"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#textarea-without-a-heading-textarea-example-nunjucks" aria-controls="textarea-without-a-heading-textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-without-a-heading-textarea-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-textarea-without-a-heading-textarea-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-textarea-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The ID of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The name of the textarea, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">spellcheck</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional number of textarea rows (default is 5 rows). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional initial value of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If <code>true</code>, textarea will be disabled. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">described<wbr>By</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">label</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> <strong>Required.</strong> The label used by the textarea component. <a href="#options-textarea-without-a-heading-textarea-example--label"> See macro options for label</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">hint</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a hint to the textarea component. <a href="#options-textarea-without-a-heading-textarea-example--hint"> See macro options for hint</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">error<wbr>Message</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add an error message to the textarea component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>. <a href="/components/error-message/#options-error-message-example">See macro options for error<wbr>Message</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">form<wbr>Group</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Additional options for the form group containing the textarea component. <a href="#options-textarea-without-a-heading-textarea-example--form-group"> See macro options for form<wbr>Group</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocomplete</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>"street-address"</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the textarea. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-textarea-example--form-group"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>form<wbr>Group</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the form group (for example to show error state for the whole group). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the form group. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">before<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add before the textarea used by the textarea component. <a href="#options-textarea-without-a-heading-textarea-example--form-group-before-input"> See macro options for form<wbr>Group before<wbr>Input</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">after<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add after the textarea used by the textarea component. <a href="#options-textarea-without-a-heading-textarea-example--form-group-after-input"> See macro options for form<wbr>Group after<wbr>Input</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-textarea-example--form-group-before-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>before<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-textarea-example--form-group-after-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>after<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-textarea-example--label"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>label</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">for</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The value of the <code>for</code> attribute, the ID of the input the label is associated with. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Page<wbr>Heading</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the label also acts as the heading for the page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the label tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the label tag. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-textarea-example--hint"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>hint</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional ID attribute to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the hint span tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/textarea/macro.njk"</span> <span class="hljs-keyword">import</span> govukTextarea %} {{ <span class="hljs-title function_">govukTextarea</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">"moreDetail"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"more-detail"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Can you provide more detail?"</span> } }) }}</code></pre> </div> </div> </div> <h3 id="limiting-the-number-of-characters">Limiting the number of characters</h3> <p>If there’s a good reason to limit the number of characters users can enter, you can use the <a href="/components/character-count/">Character count component</a>.</p> <h3 id="error-messages">Error messages</h3> <p>Error messages should be styled like this:</p> <div class="app-example-wrapper" id="textarea-with-error-textarea-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/textarea/error/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: textarea with error – textarea</span> </a> </div> <iframe title="Textarea with error – Textarea example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/textarea/error/index.html" loading="lazy"></iframe> </div> <span id="options-textarea-with-error-textarea-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-with-error-textarea-example-html" role="tab" aria-controls="textarea-with-error-textarea-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-with-error-textarea-example-nunjucks" role="tab" aria-controls="textarea-with-error-textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-with-error-textarea-example-html" aria-controls="textarea-with-error-textarea-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-with-error-textarea-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group govuk-form-group--error"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label-wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-label--l"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"more-detail"</span>></span> Can you provide more detail? <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> Do not include personal or financial information, like your National Insurance number or credit card details <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail-error"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-error-message"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-visually-hidden"</span>></span>Error:<span class="hljs-tag"></<span class="hljs-name">span</span>></span> Enter more detail <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-textarea govuk-textarea--error"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-detail"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"moreDetail"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"more-detail-hint more-detail-error"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#textarea-with-error-textarea-example-nunjucks" aria-controls="textarea-with-error-textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="textarea-with-error-textarea-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-textarea-with-error-textarea-example-details"> <summary class="govuk-details__summary"> <span class="govuk-details__summary-text"> <span data-components="github-component-arguments">Nunjucks macro options</span> </span> </summary> <div class="govuk-details__text"> <p> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. </p> <p> Some options are required for the macro to work; these are marked as “Required” in the option description. </p> <p> If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. </p> <table class="govuk-table app-options__table" id="options-textarea-with-error-textarea-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The ID of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">name</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> The name of the textarea, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">spellcheck</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional number of textarea rows (default is 5 rows). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional initial value of the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">disabled</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If <code>true</code>, textarea will be disabled. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">described<wbr>By</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">label</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> <strong>Required.</strong> The label used by the textarea component. <a href="#options-textarea-with-error-textarea-example--label"> See macro options for label</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">hint</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a hint to the textarea component. <a href="#options-textarea-with-error-textarea-example--hint"> See macro options for hint</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">error<wbr>Message</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add an error message to the textarea component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>. <a href="/components/error-message/#options-error-message-example">See macro options for error<wbr>Message</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">form<wbr>Group</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Additional options for the form group containing the textarea component. <a href="#options-textarea-with-error-textarea-example--form-group"> See macro options for form<wbr>Group</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the textarea. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocomplete</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>"street-address"</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the textarea. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-with-error-textarea-example--form-group"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>form<wbr>Group</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the form group (for example to show error state for the whole group). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the form group. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">before<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add before the textarea used by the textarea component. <a href="#options-textarea-with-error-textarea-example--form-group-before-input"> See macro options for form<wbr>Group before<wbr>Input</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">after<wbr>Input</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Content to add after the textarea used by the textarea component. <a href="#options-textarea-with-error-textarea-example--form-group-after-input"> See macro options for form<wbr>Group after<wbr>Input</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-with-error-textarea-example--form-group-before-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>before<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add before the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-with-error-textarea-example--form-group-after-input"> <caption class="govuk-table__caption govuk-heading-m ">Options for form<wbr>Group <code>after<wbr>Input</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> Text to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> HTML to add after the textarea. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-with-error-textarea-example--label"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>label</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">for</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> The value of the <code>for</code> attribute, the ID of the input the label is associated with. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">is<wbr>Page<wbr>Heading</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> Whether the label also acts as the heading for the page. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the label tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the label tag. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-textarea-with-error-textarea-example--hint"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>hint</code> component</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> <strong>Required.</strong> If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">id</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional ID attribute to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the hint span tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the hint span tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/textarea/macro.njk"</span> <span class="hljs-keyword">import</span> govukTextarea %} {{ <span class="hljs-title function_">govukTextarea</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">"moreDetail"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"more-detail"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Can you provide more detail?"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-label--l"</span>, <span class="hljs-attr">isPageHeading</span>: <span class="hljs-literal">true</span> }, <span class="hljs-attr">hint</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Do not include personal or financial information, like your National Insurance number or credit card details"</span> }, <span class="hljs-attr">errorMessage</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Enter more detail"</span> } }) }}</code></pre> </div> </div> </div> <p>Make sure errors follow the guidance in the <a href="/components/error-message/">Error message component</a> and have specific error messages for specific error states.</p> <h4 id="if-the-input-is-empty">If the input is empty</h4> <p>Say ‘Enter [whatever it is]’.<br><br>For example, ‘Enter summary’.</p> <h4 id="if-the-input-is-too-long">If the input is too long</h4> <p>Say ‘[whatever it is] must be [number] characters or less’.<br><br>For example, ‘Summary must be 400 characters or less’.</p> <h4 id="if-the-input-is-too-short">If the input is too short</h4> <p>Say ‘[whatever it is] must be [number] characters or more’.<br><br>For example, ‘Summary must be 10 characters or more’.</p> <h4 id="if-the-input-is-too-long-or-too-short">If the input is too long or too short</h4> <p>Say ‘[whatever it is] must be between [number] and [number] characters’.<br><br>For example, ‘Summary must be between 10 and 400 characters’.</p> <h4 id="if-the-input-uses-characters-that-are-not-allowed-and-you-know-what-the-characters-are">If the input uses characters that are not allowed and you know what the characters are</h4> <p>Say ‘[whatever it is] must not include [characters]’.<br><br>For example, ‘Summary must not include è and £’.</p> <h4 id="if-the-input-uses-characters-that-are-not-allowed-and-you-do-not-know-what-the-characters-are">If the input uses characters that are not allowed and you do not know what the characters are</h4> <p>Say ‘[whatever it is] must only include [list of allowed characters]’.<br><br>For example, ‘Summary must only include letters a to z, hyphens, spaces and apostrophes.</p> </div> <h2 class="govuk-heading-l govuk-!-padding-top-7" id="help-improve-this-page">Help improve this component</h2> <p class="govuk-body"> To help make sure that this page is useful, relevant and up to date, you can: </p> <ul class="govuk-list govuk-list--bullet"> <li> take part in the <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system-backlog/issues/65"> ‘Textarea’ discussion on GitHub </a> and share your research </li> <li> <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system/edit/main/src/components/textarea/index.md">propose a change on GitHub</a> – read more about <a class="govuk-link app-contact-panel__link" href="/community/propose-a-content-change-using-github/"> how to propose changes in GitHub </a> </li> </ul> <h3 class="govuk-heading-m govuk-!-padding-top-7" id="tell-us-if-your-service-uses"> Tell us if your service uses this component </h3> <p class="govuk-body"> <a class="govuk-link app-contact-panel__link" target="_blank" href="https://surveys.publishing.service.gov.uk/s/MPR0MV/">Take part in our usage survey (opens in a new tab)</a> to help us improve this component to better meet the needs of the services that use it. </p> <div class="app-contact-panel"> <h2 class="app-contact-panel__heading">Need help?</h2> <p class="govuk-body app-contact-panel__body"> If you’ve got a question about the GOV.UK Design System, <a class="govuk-link" href="/get-in-touch/">contact the team</a>. </p> </div> </main> </div> <div class="app-back-to-top app-back-to-top--hidden" data-module="app-back-to-top"> <a class="govuk-link govuk-link--no-visited-state app-back-to-top__link" href="#top"> <svg role="presentation" focusable="false" class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17"> <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path> </svg>Back to top </a> </div> </div> <footer class="govuk-footer app-footer"> <div class="govuk-width-container app-width-container"> <div class="govuk-footer__meta"> <div class="govuk-footer__meta-item govuk-footer__meta-item--grow"> <h2 class="govuk-visually-hidden">Support links</h2> <ul class="govuk-footer__inline-list"> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/accessibility-statement/"> Accessibility statement </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/sitemap/"> Sitemap </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/cookies/"> Cookies </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/privacy-policy/"> Privacy </a> </li> </ul> <div class="govuk-footer__meta-custom"> Built by the <a href="/design-system-team/" class="govuk-footer__link">GOV.UK Design System team</a> </div> <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41" > <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" /> </svg> <span class="govuk-footer__licence-description"> All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license" >Open Government Licence v3.0</a>, except where otherwise stated </span> </div> <div class="govuk-footer__meta-item"> <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/" > © Crown copyright </a> </div> </div> </div> </footer> <script type="module" src="/javascripts/application-727916cf69267c3e4d6c097e0b457283.js"></script> </body> </html>

CINXE.COM

Textarea – GOV.UK Design System