CINXE.COM
Number input – Text input – Example – GOV.UK Design System
<!DOCTYPE html> <html lang="en" class="govuk-template app-example-page__wrapper"> <head> <meta charset="utf-8"> <title>Number input – Text input – Example – 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="robots" content="noindex, nofollow"> <meta name="og:title" content="Number input – Text input"> <meta name="description" content=""> <meta name="og:description" content=""> <link rel="canonical" href="https://design-system.service.gov.uk/components/text-input/number-input/"> <link href="/stylesheets/govuk-frontend-5fced03676e21cc039bbc0ebb4bda501.min.css" rel="stylesheet" media="all"> <link href="/stylesheets/example-28cf8f56ce3cba62d258b5725b59ecd7.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 app-example-page"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <!-- Disable browser validation for any examples that include form elements --> <form action="/form-handler" method="post" novalidate> <div class="govuk-form-group"> <h1 class="govuk-label-wrapper"> <label class="govuk-label govuk-label--l" for="account-number"> What is your account number? </label> </h1> <div id="account-number-hint" class="govuk-hint"> Must be between 6 and 8 digits long </div> <input class="govuk-input govuk-input--width-10" id="account-number" name="accountNumber" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric"> </div> </form> <script type="module" src="/javascripts/application-example-7f35cf241d5bbb74822200fbc09c9926.js"></script> </body> </html>