Confirm a phone number – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Confirm a phone number – 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="Confirm a phone number"> <meta name="description" content="Identifying users when they sign in"> <meta name="og:description" content="Identifying users when they sign in"> <link rel="canonical" href="https://design-system.service.gov.uk/patterns/confirm-a-phone-number/"> <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 "> <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 " aria-label="Components" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/"> Components overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-navigation__subnav-item"> <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 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="/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 app-navigation__subnav--active" 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 app-navigation__subnav-item--current"> <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> <h3 class="app-subnav__theme">Ask users for…</h3> <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="/patterns/addresses/"> Addresses </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="/patterns/bank-details/"> Bank 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="/patterns/dates/"> Dates </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="/patterns/email-addresses/"> Email addresses </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="/patterns/equality-information/"> Equality information </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="/patterns/gender-or-sex/"> Gender or sex </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="/patterns/names/"> Names </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="/patterns/national-insurance-numbers/"> National Insurance numbers </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="/patterns/passwords/"> Passwords </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="/patterns/payment-card-details/"> Payment card 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="/patterns/phone-numbers/"> Phone numbers </a> </li> </ul> <h3 class="app-subnav__theme">Help users to…</h3> <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="/patterns/check-a-service-is-suitable/"> Check a service is suitable </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="/patterns/check-answers/"> Check answers </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="/patterns/complete-multiple-tasks/"> Complete multiple tasks </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="/patterns/confirm-a-phone-number/" aria-current="page"> Confirm a phone number </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="/patterns/confirm-an-email-address/"> Confirm an email address </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="/patterns/contact-a-department-or-service-team/"> Contact a department or service team </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="/patterns/create-a-username/"> Create a username </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="/patterns/create-accounts/"> Create accounts </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="/patterns/exit-a-page-quickly/"> Exit a page quickly </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="/patterns/navigate-a-service/"> Navigate a service </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="/patterns/start-using-a-service/"> Start using a service </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="/patterns/validation/"> Recover from validation errors </a> </li> </ul> <h3 class="app-subnav__theme">Pages</h3> <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="/patterns/confirmation-pages/"> Confirmation pages </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="/patterns/cookies-page/"> Cookies 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="/patterns/page-not-found-pages/"> Page not found pages </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="/patterns/problem-with-the-service-pages/"> There is a problem with the service pages </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="/patterns/question-pages/"> Question pages </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="/patterns/service-unavailable-pages/"> Service unavailable pages </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="/patterns/step-by-step-navigation/"> Step by step navigation </a> </li> </ul> </nav> </div> <div class="app-split-pane__content"> <main id="main-content" class="app-content" role="main"> <h1 class="govuk-heading-xl"> <span class="govuk-caption-xl"> Help users to </span> Confirm a phone number </h1> <div class="app-prose-scope"> <p>Check that a user has access to a specific mobile phone number using a security code sent by text message.</p> <div class="govuk-inset-text app-wcag-callout"> <strong class="govuk-tag app-wcag-callout__tag"> WCAG 2.2 </strong> <h2> New WCAG 2.2 criteria affect this pattern </h2> <p class="govuk-body">To help users to ‘Confirm a phone number’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria:</p> <ul class="govuk-list"> <li><a class="govuk-link" href="#wcag-resend-security-code-creation">make sure users can use a link to resend the security code (when the user creates an account)</a></li> <li><a class="govuk-link" href="#wcag-resend-security-code-sign-in">make sure users can use a link to resend the security code (when the user signs in)</a></li> </ul> <p class="govuk-body">See the full list of <a class="govuk-link" href="/accessibility/wcag-2.2/#components-and-patterns-affected-in-the-design-system">components and patterns affected by WCAG 2.2</a>.</p> </div> <div class="app-example-wrapper" id="confirm-a-phone-number-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/patterns/confirm-a-phone-number/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: confirm a phone number</span> </a> </div> <iframe title="Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/default/index.html" loading="eager"></iframe> </div> <span id="options-confirm-a-phone-number-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirm-a-phone-number-example-html" role="tab" aria-controls="confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#confirm-a-phone-number-example-html" aria-controls="confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="confirm-a-phone-number-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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your phone<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">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<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-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">"security-code"</span>></span> Security code <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 govuk-input--extra-letter-spacing"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"security-code"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"securityCode"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"one-time-code"</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> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#confirm-a-phone-number-example-nunjucks" aria-controls="confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="confirm-a-phone-number-example-nunjucks" role="tabpanel"><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-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} <h1 <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-heading-l"</span>><span class="hljs-title class_">Check</span> your phone</h1> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Security code"</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"security-code"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"securityCode"</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">"text"</span>, <span class="hljs-attr">autocomplete</span>: <span class="hljs-string">"one-time-code"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-4 govuk-input--extra-letter-spacing"</span>, <span class="hljs-attr">inputmode</span>: <span class="hljs-string">"numeric"</span> }) }} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Continue"</span> }) }} <p <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-body"</span>><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span></p></code></pre> </div> </div> </div> <h2 id="when-to-use-this-pattern">When to use this pattern</h2> <p>Ask the user to enter a security code when they need to sign in or complete a higher-risk task, such as changing a password.</p> <p>Asking the user to enter a security code sent to their mobile phone gives a second layer of security over only <a href="/patterns/passwords/">asking for a password</a>.</p> <p>You can ask for a security code every time a user signs in or only once per device, depending on the risk level of your service.</p> <h2 id="how-it-works">How it works</h2> <p>Send and ask the user for the security code when they:</p> <ul> <li>create an account</li> <li>sign in later</li> </ul> <h3 id="when-the-user-creates-an-account">When the user creates an account</h3> <p>When the user creates an account, ask for their password and mobile phone number at the same time. Make it clear if you’ll only use the mobile number for sending security codes, or if you’ll also use it for other purposes.</p> <p>After saving the user’s password and mobile phone number, verify their mobile phone number by sending them a text message with a 5 digit code in this format:</p> <div class="govuk-inset-text"> 12345 is your [service name] security code </div> <p>Then ask the user to enter this code:</p> <div class="app-example-wrapper" id="confirm-a-phone-number-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='/patterns/confirm-a-phone-number/default/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: confirm a phone number second</span> </a> </div> <iframe title="Confirm a phone number second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/default/index.html" loading="lazy"></iframe> </div> <span id="options-confirm-a-phone-number-second-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirm-a-phone-number-second-example-html" role="tab" aria-controls="confirm-a-phone-number-second-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirm-a-phone-number-second-example-nunjucks" role="tab" aria-controls="confirm-a-phone-number-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#confirm-a-phone-number-second-example-html" aria-controls="confirm-a-phone-number-second-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="confirm-a-phone-number-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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your phone<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">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<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-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">"security-code"</span>></span> Security code <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 govuk-input--extra-letter-spacing"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"security-code"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"securityCode"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"one-time-code"</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> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#confirm-a-phone-number-second-example-nunjucks" aria-controls="confirm-a-phone-number-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="confirm-a-phone-number-second-example-nunjucks" role="tabpanel"><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-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} <h1 <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-heading-l"</span>><span class="hljs-title class_">Check</span> your phone</h1> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Security code"</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"security-code"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"securityCode"</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">"text"</span>, <span class="hljs-attr">autocomplete</span>: <span class="hljs-string">"one-time-code"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-4 govuk-input--extra-letter-spacing"</span>, <span class="hljs-attr">inputmode</span>: <span class="hljs-string">"numeric"</span> }) }} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Continue"</span> }) }} <p <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-body"</span>><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span></p></code></pre> </div> </div> </div> <p>Let the user enter the code in whatever format is familiar to them. Allow additional spaces, hyphens and dashes.</p> <p>Give a time limit of 15 minutes for the user to enter the code – the code should expire after this time limit.</p> <p>If the user enters an expired code that was sent more than:</p> <ul> <li>15 minutes ago, show a ‘code has expired’ error message and send the user a new code</li> <li>2 hours ago, show an ‘incorrect security code’ message, even if the code was correct</li> </ul> <p>If the user follows the ‘Not received a text message?’ link, allow them to check which mobile number they entered, and to change it if necessary. This prevents the user becoming stuck if they entered a mobile number incorrectly. Do not allow the user to change the number when they’re signing in.</p> <div class="app-wcag-note" id="wcag-resend-security-code-creation" role="note"> <strong class="govuk-tag app-wcag-callout__tag"> WCAG 2.2 </strong> <p>You must always include the link for ‘Not received a text message?’ so the user can find help in a consistent way. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">WCAG 2.2 success criterion 3.2.6 Consistent help</a>.</p> </div> <div class="app-example-wrapper" id="request-a-new-security-code-first-time-confirm-a-phone-number-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/patterns/confirm-a-phone-number/resend-first-time/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: request a new security code (first time) – confirm a phone number</span> </a> </div> <iframe title="Request a new security code (first time) – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/resend-first-time/index.html" loading="lazy"></iframe> </div> <span id="options-request-a-new-security-code-first-time-confirm-a-phone-number-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-first-time-confirm-a-phone-number-example-html" role="tab" aria-controls="request-a-new-security-code-first-time-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-first-time-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="request-a-new-security-code-first-time-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#request-a-new-security-code-first-time-confirm-a-phone-number-example-html" aria-controls="request-a-new-security-code-first-time-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="request-a-new-security-code-first-time-confirm-a-phone-number-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">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-back-link"</span>></span>Back<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Request a new security code<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">class</span>=<span class="hljs-string">"govuk-body"</span>></span>Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details"</span>></span> <span class="hljs-tag"><<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details__summary"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details__summary-text"</span>></span> Change where the text message is sent <span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">summary</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details__text"</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">"mobile-number"</span>></span> Mobile 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 govuk-input--width-20"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mobile-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"mobileNumber"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"tel"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"07700 900000"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"tel"</span>></span> <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">details</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Request a new code <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#request-a-new-security-code-first-time-confirm-a-phone-number-example-nunjucks" aria-controls="request-a-new-security-code-first-time-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="request-a-new-security-code-first-time-confirm-a-phone-number-example-nunjucks" role="tabpanel"><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/back-link/macro.njk"</span> <span class="hljs-keyword">import</span> govukBackLink %} {% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {% <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-keyword">from</span> <span class="hljs-string">"govuk/components/details/macro.njk"</span> <span class="hljs-keyword">import</span> govukDetails %} {{ <span class="hljs-title function_">govukBackLink</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Back"</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">"#"</span> }) }} <h1 <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-heading-l"</span>><span class="hljs-title class_">Request</span> a <span class="hljs-keyword">new</span> security code</h1> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> {% set mobileNumberHtml %} {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Mobile number"</span> }, <span class="hljs-attr">value</span>: <span class="hljs-string">"07700 900000"</span>, <span class="hljs-attr">id</span>: <span class="hljs-string">"mobile-number"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"mobileNumber"</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</span>, <span class="hljs-attr">autocomplete</span>: <span class="hljs-string">"tel"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-20"</span> }) }} {% endset %} {{ <span class="hljs-title function_">govukDetails</span>({ <span class="hljs-attr">summaryText</span>: <span class="hljs-string">"Change where the text message is sent"</span>, <span class="hljs-attr">html</span>: mobileNumberHtml }) }} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Request a new code"</span> }) }}</code></pre> </div> </div> </div> <p>When the user requests a new code, send them a new one. The new code should have its 15 minute time limit. The previous code should remain valid within its original time limit.</p> <h3 id="when-the-user-signs-in">When the user signs in</h3> <p>When the user returns to your service, verify their password first. Once they have entered this correctly, send a text message to their mobile phone with a 5 digit code in this format:</p> <div class="govuk-inset-text"> 12345 is your [service name] security code </div> <p>Ask the user to enter this code. Use the same pattern and time limit as when creating an account.</p> <p>If they follow the ‘Not received a text message?’ link, show them a page allowing them to request a new code. Do not reveal the mobile number you sent it to.</p> <div class="app-wcag-note" id="wcag-resend-security-code-sign-in" role="note"> <strong class="govuk-tag app-wcag-callout__tag"> WCAG 2.2 </strong> <p>You must always include the link for ‘Not received a text message?’ so the user can find help in a consistent way. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">WCAG 2.2 success criterion 3.2.6 Consistent help</a>.</p> </div> <div class="app-example-wrapper" id="request-a-new-security-code-confirm-a-phone-number-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/patterns/confirm-a-phone-number/resend/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: request a new security code – confirm a phone number</span> </a> </div> <iframe title="Request a new security code – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/resend/index.html" loading="lazy"></iframe> </div> <span id="options-request-a-new-security-code-confirm-a-phone-number-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-confirm-a-phone-number-example-html" role="tab" aria-controls="request-a-new-security-code-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="request-a-new-security-code-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#request-a-new-security-code-confirm-a-phone-number-example-html" aria-controls="request-a-new-security-code-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="request-a-new-security-code-confirm-a-phone-number-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">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-back-link"</span>></span>Back<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Request a new security code<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">class</span>=<span class="hljs-string">"govuk-body"</span>></span>Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details"</span>></span> <span class="hljs-tag"><<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details__summary"</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details__summary-text"</span>></span> I do not have access to the phone <span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">summary</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-details__text"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>If you cannot access the phone number for this account, <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>contact the Tax Credits Helpline<span class="hljs-tag"></<span class="hljs-name">a</span>></span> to get help signing in.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">details</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Request a new code <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#request-a-new-security-code-confirm-a-phone-number-example-nunjucks" aria-controls="request-a-new-security-code-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="request-a-new-security-code-confirm-a-phone-number-example-nunjucks" role="tabpanel"><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/back-link/macro.njk"</span> <span class="hljs-keyword">import</span> govukBackLink %} {% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} {% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/details/macro.njk"</span> <span class="hljs-keyword">import</span> govukDetails %} {{ <span class="hljs-title function_">govukBackLink</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Back"</span>, <span class="hljs-attr">href</span>: <span class="hljs-string">"#"</span> }) }} <h1 <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-heading-l"</span>><span class="hljs-title class_">Request</span> a <span class="hljs-keyword">new</span> security code</h1> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> {{ <span class="hljs-title function_">govukDetails</span>({ <span class="hljs-attr">summaryText</span>: <span class="hljs-string">"I do not have access to the phone"</span>, <span class="hljs-attr">html</span>: <span class="hljs-string">'<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'</span> }) }} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Request a new code"</span> }) }}</code></pre> </div> </div> </div> <p>You should tell the user what to do if they no longer have access to the phone used to sign up.</p> <p>For example, you might tell them to contact a support address.</p> <h3 id="domain-bound-codes">Domain-bound codes</h3> <p>You can also follow the <a href="https://developer.apple.com/news/?id=z0i801mg">domain-bound codes</a> standard. This improves security by restricting the code to a specific domain.</p> <p>Include the domain of the service on a new line, prefixed with an <code>@</code>, followed by a <code>#</code> symbol and the code, like this:</p> <div class="govuk-inset-text"> 12345 is your [service name] security code<br><br>@www.example.service.gov.uk #12345 </div> <h3 id="error-messages">Error messages</h3> <p>Style error messages like this:</p> <div class="app-example-wrapper" id="error-incorrect-security-code-confirm-a-phone-number-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/patterns/confirm-a-phone-number/error-incorrect/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: error, incorrect security code – confirm a phone number</span> </a> </div> <iframe title="Error, incorrect security code – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/error-incorrect/index.html" loading="lazy"></iframe> </div> <span id="options-error-incorrect-security-code-confirm-a-phone-number-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-incorrect-security-code-confirm-a-phone-number-example-html" role="tab" aria-controls="error-incorrect-security-code-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-incorrect-security-code-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="error-incorrect-security-code-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#error-incorrect-security-code-confirm-a-phone-number-example-html" aria-controls="error-incorrect-security-code-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="error-incorrect-security-code-confirm-a-phone-number-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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your phone<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">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<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-form-group govuk-form-group--error"</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">"security-code"</span>></span> Security code <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"security-code-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 correct security code <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--width-4 govuk-input--extra-letter-spacing govuk-input--error"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"security-code"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"securityCode"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"security-code-error"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"one-time-code"</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> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#error-incorrect-security-code-confirm-a-phone-number-example-nunjucks" aria-controls="error-incorrect-security-code-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="error-incorrect-security-code-confirm-a-phone-number-example-nunjucks" role="tabpanel"><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-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} <h1 <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-heading-l"</span>><span class="hljs-title class_">Check</span> your phone</h1> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Security code"</span> }, <span class="hljs-attr">errorMessage</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Enter a correct security code"</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"security-code"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"securityCode"</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">"text"</span>, <span class="hljs-attr">autocomplete</span>: <span class="hljs-string">"one-time-code"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-4 govuk-input--extra-letter-spacing"</span>, <span class="hljs-attr">inputmode</span>: <span class="hljs-string">"numeric"</span> }) }} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Continue"</span> }) }} <p <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-body"</span>><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span></p></code></pre> </div> </div> </div> <p>If the user does not enter enough digits:<br><br>Say ‘You’ve not entered enough numbers, the code must be 5 numbers’.</p> <p>If the user enters too many digits:<br><br>Say ‘You’ve entered too many numbers, the code must be 5 numbers’.</p> <p>If the user enters non-numeric characters, other than spaces:<br><br>Say ‘The code must be 5 numbers’.</p> <p>If the code has expired, show this message:</p> <div class="app-example-wrapper" id="error-security-code-expired-confirm-a-phone-number-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/patterns/confirm-a-phone-number/error-expired/' target='_blank'> Open this example in a new tab<span class="govuk-visually-hidden">: error, security code expired – confirm a phone number</span> </a> </div> <iframe title="Error, security code expired – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/error-expired/index.html" loading="lazy"></iframe> </div> <span id="options-error-security-code-expired-confirm-a-phone-number-example"></span> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-security-code-expired-confirm-a-phone-number-example-html" role="tab" aria-controls="error-security-code-expired-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-security-code-expired-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="error-security-code-expired-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#error-security-code-expired-confirm-a-phone-number-example-html" aria-controls="error-security-code-expired-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="error-security-code-expired-confirm-a-phone-number-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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your phone<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">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<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-form-group govuk-form-group--error"</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">"security-code"</span>></span> Security code <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"security-code-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> The security code has expired. New code sent. <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--width-4 govuk-input--extra-letter-spacing govuk-input--error"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"security-code"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"securityCode"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"security-code-error"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"one-time-code"</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> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span> Continue <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#error-security-code-expired-confirm-a-phone-number-example-nunjucks" aria-controls="error-security-code-expired-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="error-security-code-expired-confirm-a-phone-number-example-nunjucks" role="tabpanel"><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-keyword">from</span> <span class="hljs-string">"govuk/components/button/macro.njk"</span> <span class="hljs-keyword">import</span> govukButton %} <h1 <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-heading-l"</span>><span class="hljs-title class_">Check</span> your phone</h1> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We’ve sent you a text message with a security code.<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> {{ <span class="hljs-title function_">govukInput</span>({ <span class="hljs-attr">label</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Security code"</span> }, <span class="hljs-attr">errorMessage</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"The security code has expired. New code sent."</span> }, <span class="hljs-attr">id</span>: <span class="hljs-string">"security-code"</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">"securityCode"</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">"text"</span>, <span class="hljs-attr">autocomplete</span>: <span class="hljs-string">"one-time-code"</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">"govuk-input--width-4 govuk-input--extra-letter-spacing"</span>, <span class="hljs-attr">inputmode</span>: <span class="hljs-string">"numeric"</span> }) }} {{ <span class="hljs-title function_">govukButton</span>({ <span class="hljs-attr">text</span>: <span class="hljs-string">"Continue"</span> }) }} <p <span class="hljs-keyword">class</span>=<span class="hljs-string">"govuk-body"</span>><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span>></span>Not received a text message?<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span></p></code></pre> </div> </div> </div> <p>If the code was sent more than 2 hours ago, show the ‘incorrect security code’ message.</p> <h3 id="technical-security-measures">Technical security measures</h3> <p>Use <a href="https://www.ncsc.gov.uk/collection/passwords/updating-your-approach#tip2-password-collection">technical measures to prevent automated attacks</a>. For example, add a time delay after 10 incorrect number entries.</p> <p>Set up monitoring for potentially malicious behaviour, such as activity from unexpected geographical areas.</p> <h2 id="research-on-this-pattern">Research on this pattern</h2> <p><a href="https://www.ncsc.gov.uk/guidance/multi-factor-authentication-online-services">Read the National Cyber Security Centre’s guidance on multi-factor authentication</a>.</p> <h3 id="services-using-this-pattern">Services using this pattern</h3> <p>This pattern has been used in a number of services, including the following:</p> <p><strong>Government Digital Service</strong><br><br>GOV.UK Notify<br><br>GOV.UK Pay</p> <p><strong>Department for Work and Pensions</strong><br><br>DWP Authenticate</p> <p><strong>Home Office</strong><br><br>EU Settlement Service</p> <p><strong>Office for Product Safety and Standards</strong><br><br>Product Safety Database</p> <h3 id="next-steps">Next steps</h3> <p>We need more research to know whether it’s useful to partially show the user the phone number that the security code was sent to.</p> <p>If you’ve used this pattern, get in touch to share your user research findings.</p> </div> <h2 class="govuk-heading-l govuk-!-padding-top-7" id="help-improve-this-page">Help improve this pattern</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/25"> ‘Confirm a phone number’ 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/patterns/confirm-a-phone-number/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 pattern </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 pattern 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

Confirm a phone number – GOV.UK Design System