Text input – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Text input – 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="Text input"> <meta name="description" content="Help users enter information with the text input component"> <meta name="og:description" content="Help users enter information with the text input component"> <link rel="canonical" href="https://design-system.service.gov.uk/components/text-input/"> <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 app-navigation__subnav-item--current"> <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"> <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 app-subnav__section-item--current"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/" aria-current="page"> Text 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/textarea/"> 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"> Text input </h1> <div class="app-prose-scope"> <div class="app-example-wrapper" id="text-input-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/text-input/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input</span> </a> </div> <iframe title="Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/default/index.html" loading="eager"></iframe> </div> <span id="options-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-example-html" role="tab" aria-controls="text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-example-nunjucks" role="tab" aria-controls="text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-example-html" aria-controls="text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-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">"event-name"</span>></span> What is the name of the event? <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">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"event-name"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"eventName"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</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="#text-input-example-nunjucks" aria-controls="text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-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-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-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 a text input component. <a href="#options-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-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 input used by the text input component. <a href="#options-text-input-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 input used by the text input component. <a href="#options-text-input-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-text-input-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 input. 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 input. 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-text-input-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 input. 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 input. 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-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-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-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the name of the event?"</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">id</span>: <span class="hljs-string">"event-name"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"eventName"</span> }) }}</code></pre> </div> </div> </div> <h2 id="when-to-use-this-component">When to use this component</h2> <p>Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.</p> <h2 id="when-not-to-use-this-component">When not to use this component</h2> <p>Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the <a href="/components/textarea/">Textarea component</a>.</p> <h2 id="how-it-works">How it works</h2> <p>All text inputs must have labels, and in most cases the label should be visible.</p> <p>You should align labels above the text input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.</p> <h3 id="avoid-placeholder-text">Avoid placeholder text</h3> <p>Do not use placeholder text in place of a label, or for hints or examples, as:</p> <ul> <li>it vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers</li> <li>not all screen readers read it out</li> <li>its browser default styles often do not meet <a href="https://www.w3.org/TR/WCAG22/#contrast-minimum">WCAG 2.2 success criterion 1.4.3 Contrast (minimum)</a></li> </ul> <h3 id="if-youre-asking-one-question-on-the-page">If you’re asking one question on the page</h3> <p>If you’re asking just <a href="/patterns/question-pages/#start-by-asking-one-question-per-page">one question per page in your service</a> as recommended, you can set the contents of the <code><label></code> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.</p> <p>Read more about <a href="/get-started/labels-legends-headings/">why and how to set legends as headings</a>.</p> <p>There are 2 ways to use the text input 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="text-input-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/text-input/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input second</span> </a> </div> <iframe title="Text input second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/default/index.html" loading="lazy"></iframe> </div> <span id="options-text-input-second-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-second-example-html" role="tab" aria-controls="text-input-second-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-second-example-nunjucks" role="tab" aria-controls="text-input-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-second-example-html" aria-controls="text-input-second-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-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">"event-name"</span>></span> What is the name of the event? <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">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"event-name"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"eventName"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</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="#text-input-second-example-nunjucks" aria-controls="text-input-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-second-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-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-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-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 a text input component. <a href="#options-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-second-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-second-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-second-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-second-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-second-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-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 input used by the text input component. <a href="#options-text-input-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 input used by the text input component. <a href="#options-text-input-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-text-input-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 input. 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 input. 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-text-input-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 input. 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 input. 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-text-input-second-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-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-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the name of the event?"</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">id</span>: <span class="hljs-string">"event-name"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"eventName"</span> }) }}</code></pre> </div> </div> </div> <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="text-input-without-a-heading-text-input-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/text-input/without-heading/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input without a heading – text input</span> </a> </div> <iframe title="Text input without a heading – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/without-heading/index.html" loading="lazy"></iframe> </div> <span id="options-text-input-without-a-heading-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-without-a-heading-text-input-example-html" role="tab" aria-controls="text-input-without-a-heading-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-without-a-heading-text-input-example-nunjucks" role="tab" aria-controls="text-input-without-a-heading-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-without-a-heading-text-input-example-html" aria-controls="text-input-without-a-heading-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-without-a-heading-text-input-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">"event-name"</span>></span> What is the name of the event? <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"event-name"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"eventName"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</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="#text-input-without-a-heading-text-input-example-nunjucks" aria-controls="text-input-without-a-heading-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-without-a-heading-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-without-a-heading-text-input-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-text-input-without-a-heading-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-without-a-heading-text-input-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 a text input component. <a href="#options-text-input-without-a-heading-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-without-a-heading-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-without-a-heading-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-without-a-heading-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-without-a-heading-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-text-input-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 input used by the text input component. <a href="#options-text-input-without-a-heading-text-input-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 input used by the text input component. <a href="#options-text-input-without-a-heading-text-input-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-text-input-without-a-heading-text-input-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 input. 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 input. 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-text-input-without-a-heading-text-input-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 input. 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 input. 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-text-input-without-a-heading-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-text-input-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-text-input-without-a-heading-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the name of the event?"</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"event-name"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"eventName"</span> }) }}</code></pre> </div> </div> </div> <h3 id="use-appropriately-sized-text-inputs">Use appropriately-sized text inputs</h3> <p>Help users understand what they should enter by making text inputs the right size for the content they’re intended for.</p> <p>By default, the width of text inputs is fluid and will fit the full width of the container they are placed into.</p> <p>If you want to make the input smaller, you can either use a fixed width input, or use the width override classes to create a smaller, fluid width input.</p> <h4 id="fixed-width-inputs">Fixed width inputs</h4> <p>Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, phone number inputs should be phone number-sized.</p> <p>The widths are designed for specific character lengths and to be consistent across a range of browsers. They include extra padding to fit icons that some browsers might insert into the input (for example to show or generate a password).</p> <p>On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.</p> <div class="app-example-wrapper" id="fixed-width-inputs-text-input-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/text-input/input-fixed-width/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: fixed width inputs – text input</span> </a> </div> <iframe title="Fixed width inputs – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/text-input/input-fixed-width/index.html" loading="lazy"></iframe> </div> <span id="options-fixed-width-inputs-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fixed-width-inputs-text-input-example-html" role="tab" aria-controls="fixed-width-inputs-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fixed-width-inputs-text-input-example-nunjucks" role="tab" aria-controls="fixed-width-inputs-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#fixed-width-inputs-text-input-example-html" aria-controls="fixed-width-inputs-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="fixed-width-inputs-text-input-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">"width-20"</span>></span> 20 character width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-20"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"width-20"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"width20"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"width-10"</span>></span> 10 character width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"width-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"width10"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"width-5"</span>></span> 5 character width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-5"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"width-5"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"width5"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"width-4"</span>></span> 4 character width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-4"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"width-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"width4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"width-3"</span>></span> 3 character width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-3"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"width-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"width3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"width-2"</span>></span> 2 character width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-2"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"width-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"width2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</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="#fixed-width-inputs-text-input-example-nunjucks" aria-controls="fixed-width-inputs-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="fixed-width-inputs-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-fixed-width-inputs-text-input-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-fixed-width-inputs-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-fixed-width-inputs-text-input-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 a text input component. <a href="#options-fixed-width-inputs-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-fixed-width-inputs-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-fixed-width-inputs-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-fixed-width-inputs-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-fixed-width-inputs-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fixed-width-inputs-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fixed-width-inputs-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fixed-width-inputs-text-input-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 input used by the text input component. <a href="#options-fixed-width-inputs-text-input-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 input used by the text input component. <a href="#options-fixed-width-inputs-text-input-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-fixed-width-inputs-text-input-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 input. 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 input. 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-fixed-width-inputs-text-input-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 input. 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 input. 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-fixed-width-inputs-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fixed-width-inputs-text-input-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-fixed-width-inputs-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"20 character width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-20"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"width-20"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"width20"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"10 character width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-10"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"width-10"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"width10"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"5 character width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-5"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"width-5"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"width5"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"4 character width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-4"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"width-4"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"width4"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"3 character width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-3"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"width-3"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"width3"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"2 character width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-2"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"width-2"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"width2"</span> }) }}</code></pre> </div> </div> </div> <h4 id="fluid-width-inputs">Fluid width inputs</h4> <p>Use the width override classes to reduce the width of an input in relation to its parent container, for example, to two-thirds.</p> <p>Fluid width inputs will resize with the viewport.</p> <div class="app-example-wrapper" id="fluid-width-inputs-text-input-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/text-input/input-fluid-width/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: fluid width inputs – text input</span> </a> </div> <iframe title="Fluid width inputs – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/text-input/input-fluid-width/index.html" loading="lazy"></iframe> </div> <span id="options-fluid-width-inputs-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fluid-width-inputs-text-input-example-html" role="tab" aria-controls="fluid-width-inputs-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fluid-width-inputs-text-input-example-nunjucks" role="tab" aria-controls="fluid-width-inputs-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#fluid-width-inputs-text-input-example-html" aria-controls="fluid-width-inputs-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="fluid-width-inputs-text-input-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">"full"</span>></span> Full width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-full"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"full"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"full"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"three-quarters"</span>></span> Three-quarters width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-three-quarters"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"three-quarters"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"threeQuarters"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"two-thirds"</span>></span> Two-thirds width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-two-thirds"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"two-thirds"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"twoThirds"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"one-half"</span>></span> One-half width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-one-half"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"one-half"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"oneHalf"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"one-third"</span>></span> One-third width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-one-third"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"one-third"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"oneThird"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <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">"one-quarter"</span>></span> One-quarter width <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-one-quarter"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"one-quarter"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"oneQuarter"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</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="#fluid-width-inputs-text-input-example-nunjucks" aria-controls="fluid-width-inputs-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="fluid-width-inputs-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-fluid-width-inputs-text-input-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-fluid-width-inputs-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-fluid-width-inputs-text-input-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 a text input component. <a href="#options-fluid-width-inputs-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-fluid-width-inputs-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-fluid-width-inputs-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-fluid-width-inputs-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-fluid-width-inputs-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fluid-width-inputs-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fluid-width-inputs-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fluid-width-inputs-text-input-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 input used by the text input component. <a href="#options-fluid-width-inputs-text-input-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 input used by the text input component. <a href="#options-fluid-width-inputs-text-input-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-fluid-width-inputs-text-input-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 input. 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 input. 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-fluid-width-inputs-text-input-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 input. 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 input. 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-fluid-width-inputs-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-fluid-width-inputs-text-input-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-fluid-width-inputs-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Full width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-!-width-full"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"full"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"full"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Three-quarters width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-!-width-three-quarters"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"three-quarters"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"threeQuarters"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Two-thirds width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-!-width-two-thirds"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"two-thirds"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"twoThirds"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"One-half width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-!-width-one-half"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"one-half"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"oneHalf"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"One-third width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-!-width-one-third"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"one-third"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"oneThird"</span> }) }} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"One-quarter width"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-!-width-one-quarter"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"one-quarter"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"oneQuarter"</span> }) }}</code></pre> </div> </div> </div> <h3 id="hint-text">Hint text</h3> <p>Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.</p> <p>Keep hint text to a single short sentence, without any full stops.</p> <p>Do not use links in hint text. While screen readers will read out the link text when describing the field, they usually do not tell users the text is a link.</p> <div class="app-example-wrapper" id="hint-text-text-input-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/text-input/input-hint-text/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: hint text – text input</span> </a> </div> <iframe title="Hint text – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-hint-text/index.html" loading="lazy"></iframe> </div> <span id="options-hint-text-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#hint-text-text-input-example-html" role="tab" aria-controls="hint-text-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#hint-text-text-input-example-nunjucks" role="tab" aria-controls="hint-text-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#hint-text-text-input-example-html" aria-controls="hint-text-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="hint-text-text-input-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">"event-name"</span>></span> What is the name of the event? <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">"event-name-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> The name you’ll use on promotional material <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"event-name"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"eventName"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"event-name-hint"</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="#hint-text-text-input-example-nunjucks" aria-controls="hint-text-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="hint-text-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-hint-text-text-input-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-hint-text-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-hint-text-text-input-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 a text input component. <a href="#options-hint-text-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-hint-text-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-hint-text-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-hint-text-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-hint-text-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-hint-text-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-hint-text-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-hint-text-text-input-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 input used by the text input component. <a href="#options-hint-text-text-input-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 input used by the text input component. <a href="#options-hint-text-text-input-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-hint-text-text-input-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 input. 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 input. 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-hint-text-text-input-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 input. 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 input. 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-hint-text-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-hint-text-text-input-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-hint-text-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the name of the event?"</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">"The name you’ll use on promotional material"</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"event-name"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"eventName"</span> }) }}</code></pre> </div> </div> </div> <h4 id="when-not-to-use-hint-text">When not to use hint text</h4> <p>Do not use hint text to explain anything that’s longer than a short, simple sentence. Screen readers read out the entire text when users interact with the form element. This could frustrate users if the text is long.</p> <p>If you’re asking a question that needs a detailed explanation, see <a href="/patterns/question-pages/#asking-complex-questions-without-using-hint-text">asking complex questions without using hint text</a>.</p> <h4 id="avoid-links">Avoid links</h4> <p>Do not include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.</p> <h3 id="numbers">Numbers</h3> <h4 id="asking-for-whole-numbers">Asking for whole numbers</h4> <p>If you’re asking the user to enter a whole number, set the <code>inputmode</code> attribute to <code>numeric</code> to use the numeric keypad on devices with on-screen keyboards.</p> <p>See how to do this by opening the HTML and Nunjucks tabs in this example:</p> <div class="app-example-wrapper" id="number-input-text-input-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/text-input/number-input/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: number input – text input</span> </a> </div> <iframe title="Number input – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/text-input/number-input/index.html" loading="lazy"></iframe> </div> <span id="options-number-input-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#number-input-text-input-example-html" role="tab" aria-controls="number-input-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#number-input-text-input-example-nunjucks" role="tab" aria-controls="number-input-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#number-input-text-input-example-html" aria-controls="number-input-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="number-input-text-input-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">"account-number"</span>></span> What is your account number? <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">"account-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> Must be between 6 and 8 digits long <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"account-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accountNumber"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"account-number-hint"</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">"numeric"</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="#number-input-text-input-example-nunjucks" aria-controls="number-input-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="number-input-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-number-input-text-input-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-number-input-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-number-input-text-input-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 a text input component. <a href="#options-number-input-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-number-input-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-number-input-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-number-input-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-number-input-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-number-input-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-number-input-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-number-input-text-input-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 input used by the text input component. <a href="#options-number-input-text-input-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 input used by the text input component. <a href="#options-number-input-text-input-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-number-input-text-input-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 input. 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 input. 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-number-input-text-input-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 input. 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 input. 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-number-input-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-number-input-text-input-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-number-input-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is your account number?"</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">classes</span>: <span class="hljs-string">"govuk-input--width-10"</span>, <span class="hljs-attr">hint</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Must be between 6 and 8 digits long"</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"account-number"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"accountNumber"</span>, <span class="hljs-attr">inputmode</span>: <span class="hljs-string">"numeric"</span>, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</span> }) }}</code></pre> </div> </div> </div> <p>There is specific guidance on:</p> <ul> <li><a href="/patterns/dates/">how to ask for dates</a></li> <li><a href="/patterns/phone-numbers/">how to ask for phone numbers</a></li> </ul> <h4 id="asking-for-decimal-numbers">Asking for decimal numbers</h4> <p>If you’re asking the user to enter a number that might include decimal places, use <code>input type="text"</code>.</p> <p>Do not set the <code>inputmode</code> attribute to <code>decimal</code> as it causes some devices to bring up a keypad without a key for the decimal separator.</p> <div class="app-example-wrapper" id="example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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/text-input/decimal-input/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: example of an input asking for numbers with decimal places – text input</span> </a> </div> <iframe title="Example of an input asking for numbers with decimal places – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/text-input/decimal-input/index.html" loading="lazy"></iframe> </div> <span id="options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-html" role="tab" aria-controls="example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-nunjucks" role="tab" aria-controls="example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-html" aria-controls="example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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">"weight"</span>></span> Weight, in kilograms <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-5"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"weight"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"weight"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__suffix"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>kg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</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="#example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-nunjucks" aria-controls="example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 a text input component. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 input used by the text input component. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 input used by the text input component. <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 input. 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 input. 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-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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 input. 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 input. 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-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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-example-of-an-input-asking-for-numbers-with-decimal-places-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Weight, in kilograms"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-5"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"weight"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"weight"</span>, <span class="hljs-attr">suffix</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"kg"</span> }, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</span> }) }}</code></pre> </div> </div> </div> <h4 id="avoid-using-inputs-with-a-type-of-number">Avoid using inputs with a type of number</h4> <p>Do not use <code><input type="number"></code> unless your user research shows that there’s a need for it. With <code><input type="number"></code> there’s a risk of users accidentally incrementing a number when they’re trying to do something else - for example, scroll up or down the page. And if the user tries to enter something that’s not a number, there’s no explicit feedback about what they’re doing wrong.</p> <h3 id="codes-and-sequences">Codes and sequences</h3> <p>Help the user visually check the code they’ve typed is correct by styling the input’s text to visually separate each character. This is important if you’re asking the user to enter a code or sequence they’re unlikely to have memorised, such as an application reference ID, account number or security code.</p> <p>You do not need to do this for memorable information, such as phone numbers and postcodes.</p> <div class="app-example-wrapper" id="example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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/text-input/code-sequence/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: example of a text input asking for a code or sequence – text input</span> </a> </div> <iframe title="Example of a text input asking for a code or sequence – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/text-input/code-sequence/index.html" loading="lazy"></iframe> </div> <span id="options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-html" role="tab" aria-controls="example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-nunjucks" role="tab" aria-controls="example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-html" aria-controls="example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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">"authentication-code"</span>></span> Company authentication code <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"authentication-code-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> This is on the company incorporation letter sent to the registered office address <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-5 govuk-input--extra-letter-spacing"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"authentication-code"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"authenticationCode"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"NC1701"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"authentication-code-hint"</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="#example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-nunjucks" aria-controls="example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 a text input component. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 input used by the text input component. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 input used by the text input component. <a href="#options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 input. 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 input. 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-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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 input. 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 input. 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-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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-example-of-a-text-input-asking-for-a-code-or-sequence-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Company authentication code"</span> }, <span class="hljs-attr">hint</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"This is on the company incorporation letter sent to the registered office address"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-5 govuk-input--extra-letter-spacing"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"authentication-code"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"authenticationCode"</span>, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">"NC1701"</span> }) }}</code></pre> </div> </div> </div> <p>There is specific guidance on:</p> <ul> <li><a href="/patterns/bank-details/">how to ask for bank account details</a></li> <li><a href="/patterns/national-insurance-numbers/">how to ask for National Insurance numbers</a></li> <li><a href="/patterns/confirm-a-phone-number/">how to confirm a phone number</a></li> </ul> <h3 id="prefixes-and-suffixes">Prefixes and suffixes</h3> <p>Use prefixes and suffixes to help users enter things like currencies and measurements.</p> <div class="app-example-wrapper" id="text-input-with-prefix-and-suffix-text-input-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/text-input/input-prefix-suffix/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input with prefix and suffix – text input</span> </a> </div> <iframe title="Text input with prefix and suffix – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-prefix-suffix/index.html" loading="lazy"></iframe> </div> <span id="options-text-input-with-prefix-and-suffix-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-text-input-example-html" role="tab" aria-controls="text-input-with-prefix-and-suffix-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-text-input-example-nunjucks" role="tab" aria-controls="text-input-with-prefix-and-suffix-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-prefix-and-suffix-text-input-example-html" aria-controls="text-input-with-prefix-and-suffix-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-and-suffix-text-input-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">"cost-per-item"</span>></span> What is the cost per item, in pounds? <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">class</span>=<span class="hljs-string">"govuk-input__wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__prefix"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>£<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-5"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cost-per-item"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"costPerItem"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__suffix"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>per item<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</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="#text-input-with-prefix-and-suffix-text-input-example-nunjucks" aria-controls="text-input-with-prefix-and-suffix-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-and-suffix-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-with-prefix-and-suffix-text-input-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-text-input-with-prefix-and-suffix-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-with-prefix-and-suffix-text-input-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 a text input component. <a href="#options-text-input-with-prefix-and-suffix-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-with-prefix-and-suffix-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-with-prefix-and-suffix-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-with-prefix-and-suffix-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-with-prefix-and-suffix-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-text-input-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 input used by the text input component. <a href="#options-text-input-with-prefix-and-suffix-text-input-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 input used by the text input component. <a href="#options-text-input-with-prefix-and-suffix-text-input-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-text-input-with-prefix-and-suffix-text-input-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 input. 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 input. 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-text-input-with-prefix-and-suffix-text-input-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 input. 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 input. 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-text-input-with-prefix-and-suffix-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-text-input-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-text-input-with-prefix-and-suffix-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">id</span>: <span class="hljs-string">"cost-per-item"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"costPerItem"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the cost per item, in pounds?"</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">prefix</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"£"</span> }, <span class="hljs-attr">suffix</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"per item"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-5"</span>, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</span> }) }}</code></pre> </div> </div> </div> <p>Prefixes and suffixes are useful when there’s a commonly understood symbol or abbreviation for the type of information you’re asking for. Do not rely on prefixes or suffixes alone, because screen readers will not read them out.</p> <p>If you need a specific type of information, say so in the input label or hint text as well. For example, put ‘Cost, in pounds’ in the input label and use the ‘£’ symbol in the prefix.</p> <p>Position prefixes and suffixes so that they’re outside of their input. This is to avoid interfering with some browsers that might insert an icon into the input (for example to show or generate a password).</p> <p>Some users may miss that the input already has a suffix or prefix, and enter a prefix or suffix into the input. Allow for this in your validation and do not show an error.</p> <h4 id="text-inputs-with-a-prefix">Text inputs with a prefix</h4> <div class="app-example-wrapper" id="text-input-with-prefix-text-input-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/text-input/input-prefix/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input with prefix – text input</span> </a> </div> <iframe title="Text input with prefix – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-prefix/index.html" loading="lazy"></iframe> </div> <span id="options-text-input-with-prefix-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-text-input-example-html" role="tab" aria-controls="text-input-with-prefix-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-text-input-example-nunjucks" role="tab" aria-controls="text-input-with-prefix-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-prefix-text-input-example-html" aria-controls="text-input-with-prefix-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-text-input-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">"cost"</span>></span> What is the cost in pounds? <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">class</span>=<span class="hljs-string">"govuk-input__wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__prefix"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>£<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-5"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cost"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cost"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</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="#text-input-with-prefix-text-input-example-nunjucks" aria-controls="text-input-with-prefix-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-with-prefix-text-input-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-text-input-with-prefix-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-with-prefix-text-input-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 a text input component. <a href="#options-text-input-with-prefix-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-with-prefix-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-with-prefix-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-with-prefix-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-with-prefix-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-text-input-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 input used by the text input component. <a href="#options-text-input-with-prefix-text-input-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 input used by the text input component. <a href="#options-text-input-with-prefix-text-input-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-text-input-with-prefix-text-input-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 input. 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 input. 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-text-input-with-prefix-text-input-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 input. 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 input. 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-text-input-with-prefix-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-text-input-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-text-input-with-prefix-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">id</span>: <span class="hljs-string">"cost"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"cost"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the cost in pounds?"</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">prefix</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"£"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-5"</span>, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</span> }) }}</code></pre> </div> </div> </div> <h4 id="text-inputs-with-a-suffix">Text inputs with a suffix</h4> <div class="app-example-wrapper" id="text-input-with-suffix-text-input-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/text-input/input-suffix/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input with suffix – text input</span> </a> </div> <iframe title="Text input with suffix – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-suffix/index.html" loading="lazy"></iframe> </div> <span id="options-text-input-with-suffix-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-suffix-text-input-example-html" role="tab" aria-controls="text-input-with-suffix-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-suffix-text-input-example-nunjucks" role="tab" aria-controls="text-input-with-suffix-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-suffix-text-input-example-html" aria-controls="text-input-with-suffix-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-suffix-text-input-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">"weight"</span>></span> What is the weight in kilograms? <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">class</span>=<span class="hljs-string">"govuk-input__wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-5"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"weight"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"weight"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__suffix"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>kg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</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="#text-input-with-suffix-text-input-example-nunjucks" aria-controls="text-input-with-suffix-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-suffix-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-with-suffix-text-input-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-text-input-with-suffix-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-with-suffix-text-input-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 a text input component. <a href="#options-text-input-with-suffix-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-with-suffix-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-with-suffix-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-with-suffix-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-with-suffix-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-suffix-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-suffix-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-suffix-text-input-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 input used by the text input component. <a href="#options-text-input-with-suffix-text-input-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 input used by the text input component. <a href="#options-text-input-with-suffix-text-input-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-text-input-with-suffix-text-input-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 input. 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 input. 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-text-input-with-suffix-text-input-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 input. 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 input. 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-text-input-with-suffix-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-suffix-text-input-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-text-input-with-suffix-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">id</span>: <span class="hljs-string">"weight"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"weight"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the weight in kilograms?"</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">suffix</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"kg"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-5"</span>, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</span> }) }}</code></pre> </div> </div> </div> <h3 id="use-the-autocomplete-attribute">Use the autocomplete attribute</h3> <p>Use the <code>autocomplete</code> attribute on text inputs to help users complete forms more quickly. This lets you specify an input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.</p> <p>For example, to enable autofill on a postcode field, set the <code>autocomplete</code> attribute to <code>postal-code</code>. See how to do this in the HTML and Nunjucks tabs in the following example.</p> <div class="app-example-wrapper" id="text-input-with-autocomplete-attribute-text-input-example-open" data-module="app-tabs" data-open> <span id="options-text-input-with-autocomplete-attribute-text-input-example-open"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-autocomplete-attribute-text-input-example-open-html" role="tab" aria-controls="text-input-with-autocomplete-attribute-text-input-example-open-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-autocomplete-attribute-text-input-example-open-nunjucks" role="tab" aria-controls="text-input-with-autocomplete-attribute-text-input-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-autocomplete-attribute-text-input-example-open-html" aria-controls="text-input-with-autocomplete-attribute-text-input-example-open-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-autocomplete-attribute-text-input-example-open-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">"postcode"</span>></span> Postcode <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"postcode"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"postcode"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"postal-code"</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="#text-input-with-autocomplete-attribute-text-input-example-open-nunjucks" aria-controls="text-input-with-autocomplete-attribute-text-input-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-autocomplete-attribute-text-input-example-open-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-with-autocomplete-attribute-text-input-example-open-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-text-input-with-autocomplete-attribute-text-input-example-open--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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--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 a text input component. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-text-input-example-open--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-text-input-example-open--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-text-input-example-open--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 input used by the text input component. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--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 input used by the text input component. <a href="#options-text-input-with-autocomplete-attribute-text-input-example-open--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-text-input-with-autocomplete-attribute-text-input-example-open--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 input. 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 input. 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-text-input-with-autocomplete-attribute-text-input-example-open--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 input. 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 input. 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-text-input-with-autocomplete-attribute-text-input-example-open--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-text-input-example-open--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-text-input-with-autocomplete-attribute-text-input-example-open--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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Postcode"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-10"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"postcode"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"postcode"</span>, <span class="hljs-attr">autocomplete</span>: <span class="hljs-string">"postal-code"</span> }) }}</code></pre> </div> </div> </div> <p>If you are working in production and there is a relevant <a href="https://www.w3.org/TR/WCAG22/#input-purposes">input purpose</a>, you’ll need to use the <code>autocomplete</code> attribute to meet <a href="https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html">WCAG 2.2 success criterion 1.3.5 Identify input purpose, level AA</a>.</p> <p>You will not normally need to use the <code>autocomplete</code> attribute in prototypes, as users will not generally be using their own devices.</p> <h3 id="do-not-disable-copy-and-paste">Do not disable copy and paste</h3> <p>Users often need to copy and paste information into a text input, so do not stop them from doing this.</p> <h3 id="avoid-restricting-the-length-of-a-users-input">Avoid restricting the length of a user’s input</h3> <p>Using the <code>maxlength</code> attribute means there is no feedback to users that their text input is truncated. This is especially true where the text has been copied and pasted from elsewhere. This can cause users to accidentally provide incorrect or incomplete information.</p> <p>A restrictive maximum length can stop users from formatting information in their usual way. For example, putting spaces in a postcode or commas in a large number.</p> <p>Some assistive technologies do not tell users if an input has a <code>maxlength</code> set or if the user has passed the limit. Voice control software may insert additional spaces into the input.</p> <p>If you must enforce a maximum length for technical reasons, inform the user of the limit in the hint, but allow them to provide more information. Only return an error if the value is longer than allowed after normalisation. For longer values, consider using the <a href="/components/character-count/">Character count component</a> instead.</p> <h3 id="how-and-when-to-spellcheck-a-users-input">How and when to spellcheck a user’s input</h3> <p>Sometimes, browsers will spellcheck the information a user puts into a text input. If a user enters something which is recognised as a spelling error, sighted users will see a red line under the word.</p> <p>If you are asking users for information which is not appropriate to spellcheck, like a reference number, name, email address or National Insurance number, disable the spellcheck.</p> <p>To do this set the <code>spellcheck</code> attribute to <code>false</code> as shown in this example.</p> <div class="app-example-wrapper" id="text-input-with-spellcheck-disabled-text-input-example-open" data-module="app-tabs" data-open> <span id="options-text-input-with-spellcheck-disabled-text-input-example-open"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-spellcheck-disabled-text-input-example-open-html" role="tab" aria-controls="text-input-with-spellcheck-disabled-text-input-example-open-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-spellcheck-disabled-text-input-example-open-nunjucks" role="tab" aria-controls="text-input-with-spellcheck-disabled-text-input-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-spellcheck-disabled-text-input-example-open-html" aria-controls="text-input-with-spellcheck-disabled-text-input-example-open-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-spellcheck-disabled-text-input-example-open-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">"name"</span>></span> Reference number <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</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="#text-input-with-spellcheck-disabled-text-input-example-open-nunjucks" aria-controls="text-input-with-spellcheck-disabled-text-input-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-spellcheck-disabled-text-input-example-open-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-with-spellcheck-disabled-text-input-example-open-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-text-input-with-spellcheck-disabled-text-input-example-open--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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--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 a text input component. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-text-input-example-open--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-text-input-example-open--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-text-input-example-open--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 input used by the text input component. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--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 input used by the text input component. <a href="#options-text-input-with-spellcheck-disabled-text-input-example-open--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-text-input-with-spellcheck-disabled-text-input-example-open--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 input. 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 input. 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-text-input-with-spellcheck-disabled-text-input-example-open--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 input. 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 input. 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-text-input-with-spellcheck-disabled-text-input-example-open--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-text-input-example-open--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-text-input-with-spellcheck-disabled-text-input-example-open--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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Reference number"</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"name"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</span> }) }}</code></pre> </div> </div> </div> <p>Browsers do not consistently spellcheck user’s input by default. If you are asking a question where spellcheck would be useful, set the <code>spellcheck</code> attribute to <code>true</code>.</p> <h3 id="error-messages">Error messages</h3> <p>Error messages should be styled like this:</p> <div class="app-example-wrapper" id="text-input-with-errors-text-input-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/text-input/error/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input with errors – text input</span> </a> </div> <iframe title="Text input with errors – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/error/index.html" loading="lazy"></iframe> </div> <span id="options-text-input-with-errors-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-errors-text-input-example-html" role="tab" aria-controls="text-input-with-errors-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-errors-text-input-example-nunjucks" role="tab" aria-controls="text-input-with-errors-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-errors-text-input-example-html" aria-controls="text-input-with-errors-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-errors-text-input-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">"event-name"</span>></span> What is the name of the event? <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">"event-name-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span> The name you’ll use on promotional material <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">"event-name-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 an event name <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--error"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"event-name"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"eventName"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"event-name-hint event-name-error"</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="#text-input-with-errors-text-input-example-nunjucks" aria-controls="text-input-with-errors-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-errors-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-with-errors-text-input-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-text-input-with-errors-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-with-errors-text-input-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 a text input component. <a href="#options-text-input-with-errors-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-with-errors-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-with-errors-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-with-errors-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-with-errors-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-errors-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-errors-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-errors-text-input-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 input used by the text input component. <a href="#options-text-input-with-errors-text-input-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 input used by the text input component. <a href="#options-text-input-with-errors-text-input-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-text-input-with-errors-text-input-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 input. 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 input. 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-text-input-with-errors-text-input-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 input. 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 input. 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-text-input-with-errors-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-errors-text-input-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-text-input-with-errors-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the name of the event?"</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">id</span>: <span class="hljs-string">"event-name"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"eventName"</span>, <span class="hljs-attr">hint</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"The name you’ll use on promotional material"</span> }, <span class="hljs-attr">errorMessage</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Enter an event name"</span> } }) }}</code></pre> </div> </div> </div> <h4 id="if-the-input-has-a-prefix-or-a-suffix">If the input has a prefix or a suffix</h4> <div class="app-example-wrapper" id="text-input-with-prefix-and-suffix-with-error-text-input-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/text-input/input-prefix-suffix-error/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: text input with prefix and suffix with error – text input</span> </a> </div> <iframe title="Text input with prefix and suffix with error – Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-prefix-suffix-error/index.html" loading="lazy"></iframe> </div> <span id="options-text-input-with-prefix-and-suffix-with-error-text-input-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-with-error-text-input-example-html" role="tab" aria-controls="text-input-with-prefix-and-suffix-with-error-text-input-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-with-error-text-input-example-nunjucks" role="tab" aria-controls="text-input-with-prefix-and-suffix-with-error-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-prefix-and-suffix-with-error-text-input-example-html" aria-controls="text-input-with-prefix-and-suffix-with-error-text-input-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-and-suffix-with-error-text-input-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">"cost-per-item-error"</span>></span> What is the cost per item, in pounds? <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">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cost-per-item-error-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 a cost per item, in pounds <span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__prefix"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>£<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-input--width-5 govuk-input--error"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cost-per-item-error"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"costPerItemError"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"cost-per-item-error-error"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input__suffix"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>per item<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</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="#text-input-with-prefix-and-suffix-with-error-text-input-example-nunjucks" aria-controls="text-input-with-prefix-and-suffix-with-error-text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-and-suffix-with-error-text-input-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-text-input-with-prefix-and-suffix-with-error-text-input-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-text-input-with-prefix-and-suffix-with-error-text-input-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 input. </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 input, which is submitted with the form data. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">type</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Type of input control to render, for example, a password input control. Defaults to <code>"text"</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">inputmode</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>. </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 input. </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>, input 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 text input component. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-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 a text input component. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-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 text input 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">prefix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a prefix to the text input component. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-example--prefix"> See macro options for prefix</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">suffix</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to add a suffix to the text input component. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-example--suffix"> See macro options for suffix</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 text input component. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-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 input. </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 instance “postal-code” or “username”. 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">pattern</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Attribute to <a href="https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value. </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 input. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">autocapitalize</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Optional field to enable or disable autocapitalisation of user input. See <a href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization">autocapitalization</a> for a full list of values that can be used. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">input<wbr>Wrapper</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> If any of <code>prefix</code>, <code>suffix</code>, <code>formGroup.beforeInput</code> or <code>formGroup.afterInput</code> have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-example--input-wrapper"> See macro options for input<wbr>Wrapper</a>. </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 input. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-text-input-example--prefix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>prefix</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> Required. If <code>html</code> is set, this is not required. Text to use within the prefix. 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> Required. If <code>text</code> is set, this is not required. HTML to use within the prefix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the prefix. </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 prefix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-text-input-example--suffix"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>suffix</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> If <code>html</code> is set, this is not required. Text to use within the suffix. 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 suffix. 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">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the suffix element. </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 suffix element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-text-input-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 input used by the text input component. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-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 input used by the text input component. <a href="#options-text-input-with-prefix-and-suffix-with-error-text-input-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-text-input-with-prefix-and-suffix-with-error-text-input-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 input. 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 input. 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-text-input-with-prefix-and-suffix-with-error-text-input-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 input. 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 input. 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-text-input-with-prefix-and-suffix-with-error-text-input-example--input-wrapper"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>input<wbr>Wrapper</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 wrapping element. </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 wrapping element. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-text-input-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-text-input-with-prefix-and-suffix-with-error-text-input-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/input/macro.njk"</span> <span class="hljs-keyword">import</span> govukInput %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">id</span>: <span class="hljs-string">"cost-per-item-error"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"costPerItemError"</span>, <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"What is the cost per item, in pounds?"</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">prefix</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"£"</span> }, <span class="hljs-attr">suffix</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"per item"</span> }, <span class="hljs-attr">errorMessage</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Enter a cost per item, in pounds"</span> }, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-5"</span>, <span class="hljs-attr">spellcheck</span>: <span class="hljs-literal">false</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 your first name’.</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, ‘Address line 1 must be 35 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, ‘Full name must be 2 characters or more’.</p> <h4 id="if-the-input-has-both-a-minimum-and-maximum-length">If the input has both a minimum and maximum length</h4> <p>Say ‘[whatever it is] must be between [number] and [number] characters’.<br><br>For example, ‘Last name must be between 2 and 35 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, ‘Town or city must not include è and £’.</p> <p>Support all the characters the user might need to enter, including numbers and symbols.</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, ‘Full name must only include letters a to z, and special characters such as hyphens, spaces and apostrophes’.</p> <p>Support all the characters the user might need to enter, including numbers and symbols.</p> <h4 id="if-the-input-is-not-a-number">If the input is not a number</h4> <p>Say ‘[whatever it is] must be a number [optional example]’.<br><br>For example, ‘Hours worked a week must be a number, like 30’.</p> <p>If the input requires a decimal, use a decimal in the example. If the input allows both whole numbers and decimals, use both in the example.</p> <h4 id="if-the-input-is-not-a-whole-number">If the input is not a whole number</h4> <p>Say ‘[whatever it is] must be a whole number [optional example]’.<br><br>For example, ‘Hours worked a week must be a whole number, like 30’.</p> <h4 id="if-the-number-is-too-low">If the number is too low</h4> <p>Say ‘[whatever it is] must be [lowest] or more’.<br><br>For example, ‘Hours worked a week must be 16 or more’.</p> <h4 id="if-the-number-is-too-high">If the number is too high</h4> <p>Say ‘[whatever it is] must be [highest] or fewer’.<br><br>For example, ‘Hours worked a week must be 99 or fewer’.</p> <h4 id="if-the-input-must-be-between-2-numbers">If the input must be between 2 numbers</h4> <p>Say ‘[whatever it is] must be between [lowest] and [highest]’.<br><br>For example, ‘Hours worked a week must be between 16 and 99’.</p> <h4 id="if-the-input-is-an-amount-of-money-that-needs-decimals">If the input is an amount of money that needs decimals</h4> <p>Say ‘[whatever it is] must include pence, like 123.45 or 156.00’.<br><br>For example, ‘How much you earn a week must include pence, like 123.45 or 156.00’.</p> <h4 id="if-the-input-is-an-amount-of-money-that-must-not-have-decimals">If the input is an amount of money that must not have decimals</h4> <p>Say ‘[whatever it is] must not include pence, like 123 or 156’.<br><br>For example, ‘How much you earn a week must not include pence, like 123 or 156’.</p> <h2 id="research-on-this-component">Research on this component</h2> <p>Read a blog post about <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">the problems we discovered with input type=”number”</a>.</p> <p>The prefix and suffix design has tested well in a number of services, but <a href="https://github.com/alphagov/govuk-design-system-backlog/issues/134#issuecomment-655615251">some users have been observed clicking on prefixes</a>, on the assumption that this would do something.</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/51"> ‘Text input’ 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/text-input/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

Text input – GOV.UK Design System