CINXE.COM
Why the GOV.UK Design System team changed the input type for numbers – Technology in government
<!doctype html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8" /> <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="https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/node_modules/govuk-frontend/dist/govuk/assets/images/favicon.ico"> <link rel="icon" sizes="any" href="https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/node_modules/govuk-frontend/dist/govuk/assets/images/favicon.svg" type="image/svg+xml"> <link rel="mask-icon" href="https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/node_modules/govuk-frontend/dist/govuk/assets/images/govuk-icon-mask.svg" color="#0b0c0c"> <link rel="apple-touch-icon" href="https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/node_modules/govuk-frontend/dist/govuk/assets/images/govuk-icon-180.png"> <link rel="manifest" href="https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/node_modules/govuk-frontend/dist/govuk/assets/manifest.json"> <!--|| JM Twitter Cards by jmau111 v14.1.0 ||--> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:creator" content="@gdsteam"> <!-- [(-_-)@ site: Missing critical option ! @(-_-)] --> <meta name="twitter:title" content="Why the GOV.UK Design System team changed the input type for numbers"> <meta name="twitter:description" content="We take a look at why the GOV.UK Design System changed the element it uses for inputting numbers, making it more accessible and easier to use"> <meta name="twitter:image" content="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/design_system_number_input.jpg"> <!--|| /JM Twitter Cards by jmau111 v14.1.0 ||--> <title>Why the GOV.UK Design System team changed the input type for numbers – Technology in government</title> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel='dns-prefetch' href='//cc.cdn.civiccomputing.com' /> <link rel='dns-prefetch' href='//technology.blog.gov.uk' /> <link rel="alternate" type="application/atom+xml" title="Technology in government » Feed" href="https://technology.blog.gov.uk/feed/" /> <link rel='stylesheet' id='wp-block-library-css' href='https://technology.blog.gov.uk/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='co-authors-plus-coauthors-style-inline-css' type='text/css'> .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus]{display:inline} </style> <style id='co-authors-plus-avatar-style-inline-css' type='text/css'> .wp-block-co-authors-plus-avatar :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-avatar :where(img){vertical-align:middle}.wp-block-co-authors-plus-avatar:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-avatar.aligncenter{display:table;margin-inline:auto} </style> <style id='co-authors-plus-image-style-inline-css' type='text/css'> .wp-block-co-authors-plus-image{margin-bottom:0}.wp-block-co-authors-plus-image :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-image :where(img){vertical-align:middle}.wp-block-co-authors-plus-image:is(.alignfull,.alignwide) :where(img){width:100%}.wp-block-co-authors-plus-image:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-image.aligncenter{display:table;margin-inline:auto} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: var(--wp--custom--govuk-color--black);--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: var(--wp--custom--govuk-color--white);--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--dark-grey: var(--wp--custom--govuk-color--dark-grey);--wp--preset--color--mid-grey: var(--wp--custom--govuk-color--mid-grey);--wp--preset--color--light-grey: var(--wp--custom--govuk-color--light-grey);--wp--preset--color--blue: var(--wp--custom--govuk-color--blue);--wp--preset--color--green: var(--wp--custom--govuk-color--green);--wp--preset--color--turquoise: var(--wp--custom--govuk-color--turquoise);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--spacing--1: 0.3125rem;--wp--preset--spacing--2: 0.625rem;--wp--preset--spacing--3: 0.9375rem;--wp--preset--spacing--4: clamp(0.9375rem, (100vw - 40rem) * 1000, 1.25rem);--wp--preset--spacing--5: clamp(0.9375rem, (100vw - 40rem) * 1000, 1.5625rem);--wp--preset--spacing--6: clamp(1.25rem, (100vw - 40rem) * 1000, 1.875rem);--wp--preset--spacing--7: clamp(1.5625rem, (100vw - 40rem) * 1000, 2.5rem);--wp--preset--spacing--8: clamp(1.875rem, (100vw - 40rem) * 1000, 3.125rem);--wp--preset--spacing--9: clamp(2.5rem, (100vw - 40rem) * 1000, 3.75rem);--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);--wp--custom--govuk-color--black: #0b0c0c;--wp--custom--govuk-color--dark-grey: #505a5f;--wp--custom--govuk-color--mid-grey: #b1b4b6;--wp--custom--govuk-color--light-grey: #f3f2f1;--wp--custom--govuk-color--white: #ffffff;--wp--custom--govuk-color--blue: #1d70b8;--wp--custom--govuk-color--green: #00703c;--wp--custom--govuk-color--turquoise: #28a197;}:root { --wp--style--global--content-size: 630px;--wp--style--global--wide-size: 960px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){text-decoration: underline;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;line-height: inherit;padding: calc(0.667em + 2px) calc(1.333em + 2px);text-decoration: none;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey) !important;}.has-mid-grey-color{color: var(--wp--preset--color--mid-grey) !important;}.has-light-grey-color{color: var(--wp--preset--color--light-grey) !important;}.has-blue-color{color: var(--wp--preset--color--blue) !important;}.has-green-color{color: var(--wp--preset--color--green) !important;}.has-turquoise-color{color: var(--wp--preset--color--turquoise) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey) !important;}.has-mid-grey-background-color{background-color: var(--wp--preset--color--mid-grey) !important;}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey) !important;}.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-turquoise-background-color{background-color: var(--wp--preset--color--turquoise) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey) !important;}.has-mid-grey-border-color{border-color: var(--wp--preset--color--mid-grey) !important;}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey) !important;}.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}.has-turquoise-border-color{border-color: var(--wp--preset--color--turquoise) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='dxw-digest-css' href='https://technology.blog.gov.uk/wp-content/plugins/dxw-digest/app/../assets/css/dxw-digest.css?ver=6.7.1' type='text/css' media='all' /> <link rel='stylesheet' id='main-css' href='https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/main-0566a8b01e488d9fbc668127d32dea37ab80a01b.min.css?ver=6.7.1' type='text/css' media='all' /> <link rel='stylesheet' id='aurora-heatmap-css' href='https://technology.blog.gov.uk/wp-content/plugins/aurora-heatmap/style.css?ver=1.7.0' type='text/css' media='all' /> <script type="text/javascript" src="https://technology.blog.gov.uk/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://technology.blog.gov.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/main-bdbbaa23ed10d34e682628c40cc36fe4e7c631b9.min.js?ver=6.7.1" id="main-js"></script> <script type="text/javascript" src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js?ver=6.7.1" id="cookieControl-js"></script> <script type="text/javascript" id="cookieControlConfig-js-extra"> /* <![CDATA[ */ var cookieControlSettings = {"apiKey":"c8b1d37ba682b6d122f1360da011322b3b755539","product":"PRO","domain":"technology.blog.gov.uk"}; /* ]]> */ </script> <script type="text/javascript" src="https://technology.blog.gov.uk/wp-content/plugins/gds-cookies-and-analytics/assets/cookieControlConfig.js?ver=6.7.1" id="cookieControlConfig-js"></script> <script type="text/javascript" src="https://technology.blog.gov.uk/wp-content/plugins/dxw-digest/app/../assets/js/dxw-digest.js?ver=6.7.1" id="dxw-digest-js"></script> <script type="module" src="https://technology.blog.gov.uk/wp-content/themes/gds-blogs/build/govuk-frontend-load.js?ver=6.7.1" id="govuk-frontend-js"></script> <script type="text/javascript" id="aurora-heatmap-js-extra"> /* <![CDATA[ */ var aurora_heatmap = {"_mode":"reporter","ajax_url":"https:\/\/technology.blog.gov.uk\/wp-admin\/admin-ajax.php","action":"aurora_heatmap","reports":"click_pc,click_mobile","debug":"0","ajax_delay_time":"3000","ajax_interval":"10","ajax_bulk":null}; /* ]]> */ </script> <script type="text/javascript" src="https://technology.blog.gov.uk/wp-content/plugins/aurora-heatmap/js/aurora-heatmap.min.js?ver=1.7.0" id="aurora-heatmap-js"></script> <link rel="canonical" href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/" /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://technology.blog.gov.uk/wp-json/oembed/1.0/embed?url=https%3A%2F%2Ftechnology.blog.gov.uk%2F2020%2F02%2F24%2Fwhy-the-gov-uk-design-system-team-changed-the-input-type-for-numbers%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://technology.blog.gov.uk/wp-json/oembed/1.0/embed?url=https%3A%2F%2Ftechnology.blog.gov.uk%2F2020%2F02%2F24%2Fwhy-the-gov-uk-design-system-team-changed-the-input-type-for-numbers%2F&format=xml" /> <meta property="og:image" content="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/design_system_number_input.jpg"> <meta name="description" content="About digital and technology projects in government." /> <meta name="google-site-verification" content="ItOAFjXGR_4i9JAle39Jk30xJa-FOVuAyMV0hHme3k4" /> </head> <body class="post-template-default single single-post postid-4446 single-format-standard govuk-template__body"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> <header role="banner" class="govuk-header" data-module="govuk-header"> <div class="govuk-header__container govuk-width-container"> <div class="govuk-header__logo"> <a href="https://www.gov.uk/" title="Go to the GOV.UK homepage" id="logo" 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" fill="white" > <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> </a> </div> </div> </header> <div class="govuk-width-container"> <header class="header" aria-label="blog name"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="blog-title govuk-heading-xl"> <span class="blog"><a href="https://www.blog.gov.uk/">Blog</a></span> <a href="https://technology.blog.gov.uk">Technology in government</a> </div> <div class="bottom blog-meta"> <dl> <dt>Organisations:</dt> <dd><a href="https://www.gov.uk/government/organisations/civil-service">Civil Service</a></dd> </dl> </div> </div> <div class="govuk-grid-column-one-third"> <div class="bottom search-container"> <form role="search" method="get" id="searchform" class="form-search" action="https://technology.blog.gov.uk/"> <label class="govuk-label govuk-label--m" for="s">Search blog</label> <div class="search-input-wrapper"> <input enterkeyhint="search" title="Search" type="search" value="" name="s" id="s" class="search-query"> <input type="submit" id="searchsubmit" value="Search" class="btn"> </div> </form> </div> </div> </div> </header> <main id="content" class="govuk-grid-row" role="main"> <div class="govuk-grid-column-two-thirds main-content"> <article class="govuk-clearfix post-4446 post type-post status-publish format-standard has-post-thumbnail hentry category-open-standards category-tools tag-accessibility tag-browsers tag-developers tag-testing"> <div class="visible-print"> <p>https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/</p> </div> <header> <h1 class="govuk-heading-xl">Why the GOV.UK Design System team changed the input type for numbers</h1> <div class="govuk-body-s"> <span class="govuk-visually-hidden">Posted by: </span> <a href="https://technology.blog.gov.uk/author/hanna-laakso-gds-frontend-developer/" title="Posts by Hanna Laakso, GDS, Senior Frontend Developer" class="author url fn" rel="author">Hanna Laakso, GDS, Senior Frontend Developer</a>, <span class="govuk-visually-hidden">Posted on: </span><time class="updated" datetime="2020-02-24T11:37:44+00:00">24 February 2020</time> - <span class="govuk-visually-hidden">Categories: </span> <a href="https://technology.blog.gov.uk/category/open-standards/" rel="category tag">Open Standards</a>, <a href="https://technology.blog.gov.uk/category/tools/" rel="category tag">Tools</a></div> </header> <div class="entry-content"> <p><img fetchpriority="high" decoding="async" class="aligncenter wp-image-4460 size-full" src="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/design_system_number_input.jpg" alt="A screenshot of the new number input guidance" width="613" height="420" srcset="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/design_system_number_input.jpg 613w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/design_system_number_input-300x206.jpg 300w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/design_system_number_input-435x298.jpg 435w" sizes="(max-width: 613px) 100vw, 613px" /></p> <p><span style="font-weight: 400">To provide users with a good service, government organisations usually need to collect data. Lots of data. The <a href="https://design-system.service.gov.uk/">GOV.UK Design System</a> team publishes patterns and components that let users enter their data in an easy and accessible way. The last thing we want to do is create barriers to users completing a task and force them to find an alternative method of using the service, such as phoning a helpline. </span></p> <p><span style="font-weight: 400">Numbers are one of the most commonly asked for pieces of data, typically used in dates. We know from user research that some users prefer the large buttoned number keyboard (resembling a telephone keypad) for entering numbers on mobile. Until now, the GOV.UK Design System date input component used the HTML element <code><input type="number"></code> to provide this number keypad when a user enters dates.</span></p> <figure id="attachment_4462" class="thumbnail wp-caption alignnone" style="width: 512px"><img decoding="async" class="wp-image-4462 size-full" src="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/number_pad.jpg" alt="A large buttoned keypad used on Android devices" width="512" height="351" srcset="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/number_pad.jpg 512w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/number_pad-300x206.jpg 300w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2020/02/number_pad-435x298.jpg 435w" sizes="(max-width: 512px) 100vw, 512px" /><figcaption class="caption wp-caption-text">Large buttoned, easy to use number keypad on Android</figcaption></figure> <p><span style="font-weight: 400">However, we recently moved away from <code><input type="number"></code> to <code><input type="text" inputmode="numeric" pattern="[0-9]*"></code> and published new </span><a href="https://design-system.service.gov.uk/components/text-input/#numbers"><span style="font-weight: 400">guidance on how to ask users for numbers</span></a><span style="font-weight: 400">.</span></p> <h2><b>Why type=number is problematic</b></h2> <p><span style="font-weight: 400">Although we have user research from 2017 that didn’t flag any major issues with <code><input type="number"></code>, we identified many usability problems with this input type.</span></p> <h3><b>1. Accessibility</b></h3> <p><span style="font-weight: 400">We found that <code><input type="number"></code> :</span></p> <ul> <li style="font-weight: 400"><span style="font-weight: 400">cannot be <a href="https://github.com/alphagov/reported-bugs/issues/34">dictated or selected when using Dragon Naturally Speaking</a></span></li> <li style="font-weight: 400"><span style="font-weight: 400">appears as </span><a href="https://github.com/alphagov/reported-bugs/issues/41"><span style="font-weight: 400">unlabeled in NVDA's element list</span></a></li> <li style="font-weight: 400"><span style="font-weight: 400">appears as a <a href="https://github.com/nvaccess/nvda/issues/9675#issuecomment-499977041">spin button in NVDA's object navigation, which has an edit field and two buttons inside</a></span> <span style="font-weight: 400">- those buttons are unlabeled, but decrease/increase the value</span></li> <li style="font-weight: 400"><span style="font-weight: 400">is reported as </span><a href="https://github.com/nvaccess/nvda/issues/9675#issuecomment-499977041"><span style="font-weight: 400">unlabeled edit field</span></a><span style="font-weight: 400"> when using nvda+tab</span></li> </ul> <h3><b>2. Incrementable numbers</b></h3> <p>It's <span style="font-weight: 400">reasonable to assume that <code><input type="number"></code> can be used for collecting any numeric data: it contains the word “number”, after all. However, a <a href="https://html.spec.whatwg.org/multipage/input.html#when-number-is-not-appropriate">note in the HTML specification</a> states that <code><input type=”number”></code> is “not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number”.</span></p> <p><span style="font-weight: 400">This means that <code><input type="number"></code> can only be used for incrementable numbers, such as dates or the number of people in a household. Using <code><input type="number"></code> for collecting numbers that are not incrementable can cause problems with browsers validating them in that way.</span></p> <p><span style="font-weight: 400">For example, browsers attempt to round large numbers when incrementing or decrementing (pressing up or down key), and in the case of very large numbers they are converted to exponential notation.</span></p> <p><iframe title="Browsers attempt to round large numbers" width="620" height="349" src="https://www.youtube-nocookie.com/embed/gn6QYu6ro2Y?wmode=transparent&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p> <h4>Chrome 79.0: type=number displays large numbers in exponential format if user presses the up or down arrows on their keyboard</h4> <p><span style="font-weight: 400">Once the number is parsed by the browser as an exponent, as shown above, and possibly by mistake, t</span><span style="font-weight: 400">he </span><span style="font-weight: 400">action cannot be reversed by the user. This could confuse users. </span></p> <p><span style="font-weight: 400">If users access your site using older versions of Safari, <code><input type="number"></code> can also be problematic when collecting values of 16 or more digits. In Safari 6, the browser rounds the number when a user leaves the field, so no mistake with up or down keys is required.</span></p> <p><iframe loading="lazy" title="Safari 6 rounds the last digit on blur" width="620" height="465" src="https://www.youtube-nocookie.com/embed/1DLsuT-sYLk?wmode=transparent&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p> <h4>Safari 6 rounds the last digit on blur</h4> <p><span style="font-weight: 400">Safari 5.1 attempts to make values with at least 16 digits more readable by inserting commas.</span></p> <p><iframe loading="lazy" title="Safari 5.1 attempting a more human readable number on blur" width="620" height="465" src="https://www.youtube-nocookie.com/embed/GrZWtCCQquM?wmode=transparent&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p> <h4>Safari 5.1 attempting a more human readable number on blur</h4> <h3><b>3. Letters </b></h3> <p><span style="font-weight: 400">The </span><a href="https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)"><span style="font-weight: 400">HTML spec</span></a><span style="font-weight: 400"> states that when using <code><input type="number"></code>, “user agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number”. The web and Android versions of Chrome implement this by silently discarding all letter input except the letter ‘e’.</span></p> <p>This means <a href="https://github.com/w3c/html/issues/1355"><span style="font-weight: 400">users are not given feedback</span></a><span style="font-weight: 400"> on what type of characters </span><span style="font-weight: 400"><code><input type="number"></code></span><span style="font-weight: 400"> accepts, and assistive technologies don’t alert the user that their input has been silently discarded.</span></p> <h3><b>4. Scrolling </b></h3> <p><span style="font-weight: 400">Users can accidentally increase or decrease the number using the scroll wheel on the mouse or the scroll gesture on their trackpad. This feature can be useful when collecting countable data but bad if entering data such as passport numbers.</span></p> <h2><b>The solution</b></h2> <p><span style="font-weight: 400">Using <code><input type="text" inputmode="numeric" pattern="[0-9]*"></code> allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it. </span></p> <p><span style="font-weight: 400">Prior to 2019 there wasn’t enough browser support, especially on mobile devices, for us to feel confident in rolling this out instead of using <code><input type="number"></code>. However the <code>inputmode</code> attribute is now supported by all the <a href="https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in">mobile browsers we test in</a>.</span></p> <p><span style="font-weight: 400">We still include the <code>pattern</code> attribute for </span><a href="https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html"><span style="font-weight: 400">backwards compatibility with older iOS devices</span></a><span style="font-weight: 400">. </span></p> <p><span style="font-weight: 400">We’ve now updated the </span><a href="https://design-system.service.gov.uk/components/date-input/"><span style="font-weight: 400">date input component </span></a><span style="font-weight: 400">and the </span><a href="https://design-system.service.gov.uk/patterns/bank-details/"><span style="font-weight: 400">rest of the relevant patterns</span></a><span style="font-weight: 400">.</span></p> <p><span style="font-weight: 400">We’ve also published some </span><a href="https://design-system.service.gov.uk/components/text-input/#numbers"><span style="font-weight: 400">guidance</span></a><span style="font-weight: 400"> to help users to understand how to collect numbers in HTML forms.</span></p> <p><span style="font-weight: 400">Finally, we’ve proposed a change to the HTML spec guidance to cross reference <code>inputmode</code> when </span><a href="https://html.spec.whatwg.org/multipage/input.html#when-number-is-not-appropriate"><span style="font-weight: 400">using <code><input type="text"></code> with content that is only numbers</span></a><span style="font-weight: 400">. </span></p> <p><span style="font-weight: 400">You can take a look at the </span><a href="https://design-system.service.gov.uk/community/backlog/"><span style="font-weight: 400">GOV.UK Design System backlog</span></a><span style="font-weight: 400"> to see what else we’re working on.</span></p> <div class="highlight"> <p>If you're interested in learning more about changes like these, listen to the February episode of the <a href="https://governmentdigitalservice.podbean.com/e/government-digital-service-podcast-16-govuk-design-system/">GDS podcast</a>.</p> </div> </div> <div class="footer single"> <p class="govuk-body-s tags"><strong>Tags:</strong> <a href="https://technology.blog.gov.uk/tag/accessibility/" rel="tag">accessibility</a>, <a href="https://technology.blog.gov.uk/tag/browsers/" rel="tag">browsers</a>, <a href="https://technology.blog.gov.uk/tag/developers/" rel="tag">developers</a>, <a href="https://technology.blog.gov.uk/tag/testing/" rel="tag">testing</a></p> </div> </article> <nav class="page-numbers-container page-navigation" aria-label="Pagination"> <div class="previous"> <a href="https://technology.blog.gov.uk/2020/02/21/reporting-back-on-our-tech-talks-interoperability-and-open-standards-event/" rel="prev">Reporting back on our Tech Talks: Interoperability and open standards event</a> </div> <div class="next"> <a href="https://technology.blog.gov.uk/2020/02/25/developing-gov-uk-with-docker/" rel="next">Developing GOV.UK with Docker</a> </div> </nav> <h2 class="govuk-visually-hidden">Sharing and comments</h2> <div class="icons-buttons"> <h3>Share this page</h3> <ul> <li> <a target="_blank" href="https://twitter.com/intent/tweet?original_referer&url=https%3A%2F%2Ftechnology.blog.gov.uk%2F2020%2F02%2F24%2Fwhy-the-gov-uk-design-system-team-changed-the-input-type-for-numbers%2F&text=Why+the+GOV.UK+Design+System+team+changed+the+input+type+for+numbers" class="twitter">Twitter</a> </li> <li> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftechnology.blog.gov.uk%2F2020%2F02%2F24%2Fwhy-the-gov-uk-design-system-team-changed-the-input-type-for-numbers%2F" class="facebook">Facebook</a> </li> <li> <a target="_blank" href="https://www.linkedin.com/shareArticle?url=https%3A%2F%2Ftechnology.blog.gov.uk%2F2020%2F02%2F24%2Fwhy-the-gov-uk-design-system-team-changed-the-input-type-for-numbers%2F" class="linkedin">LinkedIn</a> </li> <li> <a href="mailto:?subject=I wanted to share this post with you from Technology in government&body=Why the GOV.UK Design System team changed the input type for numbers https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/" class="email">Email</a> </li> </ul> <div class="govuk-clearfix"></div> </div> <section id="comments" class="comments"> <h3 class="govuk-heading-m">28 comments</h3> <ol class="media-list"> <li id="comment-57436" class="comment even thread-even depth-1 media comment-57436"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Kim McGreal</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-25T12:38:23+00:00">25 February 2020</time> </p> <div class="comment-body"> <p>This is really interesting, especially when looking at it from an accessibility point of view. Thanks for the explanation 🙂</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57436" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57451" class="comment odd alt thread-odd thread-alt depth-1 media comment-57451"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Colin Cummins</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-27T09:51:29+00:00">27 February 2020</time> </p> <div class="comment-body"> <p>This seemed well laid out, simple to read and understand (from my non-technical point of view), and quite crucial from an accessibility view point.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57451" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57454" class="comment even thread-even depth-1 media comment-57454"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Thomas Finney</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-27T15:56:39+00:00">27 February 2020</time> </p> <div class="comment-body"> <p>That's actually really clever. The sole reason I would prefer to use `type="number"` would be for the number pad on mobile devices. The `inputmode` is super neat.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57454" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57455" class="comment odd alt thread-odd thread-alt depth-1 media comment-57455"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Robi Harid</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-27T16:39:47+00:00">27 February 2020</time> </p> <div class="comment-body"> <p>Great stuff. GDS continues to deliver!</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57455" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57459" class="comment even thread-even depth-1 media comment-57459"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Brandon Heyer</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-27T18:37:16+00:00">27 February 2020</time> </p> <div class="comment-body"> <p>I couldn't not comment, there are so many things factually wrong with this and the decisions made appear to be rash an ill-informed.</p> <p>1. The provided links reference Dragon 13, that is around 6 years old. Dragon 15 is currently out. A lot has changed since 2014.</p> <p>2. A credit card is NOT a number it is a string of digits/numerals: "an arithmetical value, expressed by a word, symbol, or figure, representing a particular quantity and used in counting and making calculations and for showing order in a series or for identification." Credit card numbers / reference numbers are non-quantifiable.</p> <p>3. This is confusing, sure, but should we not allow numbers greater than 10 because some people may not know how to count that high? Or binary numbers, because people don't understand it? 1eee10 is a valid number and is roughly 200.85. Furthermore, I tried your suggested version in chrome:<br /> <input type="text" inputmode=”numeric” pattern="[0-9]*> It provides no feedback when I enter non-numeric values.</p> <p>4. Again, an invalid argument because passport numbers are NOT real numbers.</p> <p>Closing: `inputmode` is actually quite poorly supported, no support from IE or Chrome. I'd also like to know whether or not `inputmode` and `pattern` are provided any support with Dragon/NVDA</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57459" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment odd alt thread-odd thread-alt depth-1 media unstyled comment-57459"> <li id="comment-57469" class="comment even depth-2 media comment-57469"> <span class="govuk-visually-hidden">Replies to Brandon Heyer></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Hanna Laakso</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T12:09:20+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>Hi Brandon,</p> <p>Thanks for your comment.</p> <p>1. We’ve also replicated the problem in Dragon 15: see <a href="https://github.com/alphagov/reported-bugs/issues/34#issuecomment-579210995" rel="nofollow ugc">comment further down that page</a>.<br /> This issue in Dragon has been around for a long time unfortunately, hence the comments going back to Dragon 13.<br /> (Generally speaking, buying new versions of assistive technology can be expensive so we can't expect users to be on the latest version.)</p> <p>2. The point made in the blog post is that teams implementing forms might not be clear on differences between types of numeric data to the level of detail that you quote, unless they read the note in the HTML specification that advises against using `<input type="number">` for non-incrementable numbers and possibly do some of their own investigation. Since the HTML input types contain no other obvious candidate for collecting credit card numbers it would not be unreasonable to choose `<input type=“number”>`, especially as it conveniently brings up the large buttoned number keypad on mobile devices.<br /> <br /> 3. If `<input type=“number”>` is used for collecting non-incrementable data which gets incremented by mistake then the service could fail for the user. Or as the HTML specification says in this context: “Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect.”<br /> Regarding your comment about not getting browser feedback with `inputmode`: the problem with `<input type=“number”>` is that it discards user input without notifying the user and this could create barriers to users completing their task. With `inputmode` the user can type in their answer in a format that suits them and submit the form: if the server detects a problem with their answer it refreshes the page with an accessible error message telling the user what the problem is. In this way the team retains control of how users find out about errors and can ensure that users can recover from them. Relying on native browser validation might not be a good idea as it can be implemented inconsistently by different browser vendors: `<input type=“number”>` discarding user input only in Chrome is a good example of this.<br /> This is a complex topic but our team are just about to publish some related guidance - I’ll add a link to it here when it’s published as it covers the topic of helping users recover from errors in more detail. </p> <p>4. Same as 2. Teams creating forms might not be aware of the HTML specification and choose to use `<input type=“number”>` as out the HTML input types it seems the most suitable.</p> <p>`inputmode` is supported on all the <a href="https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in" rel="nofollow ugc">mobile browsers we test in</a> which means that we can display the large buttoned number keypad for users. `inputmode` is <a href="https://caniuse.com/#search=inputmode" rel="nofollow ugc">supported by Chrome</a>. IE doesn’t have a mobile browser.</p> <p>I hope this helps.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57469" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment odd alt depth-2 media unstyled comment-57469"> <li id="comment-57492" class="comment even depth-3 media comment-57492"> <span class="govuk-visually-hidden">Replies to Hanna Laakso></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Duffy</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-02T11:33:34+00:00">02 March 2020</time> </p> <div class="comment-body"> <p>*mic drop* Great explanations.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57492" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment odd alt depth-3 media unstyled comment-57492"> <li id="comment-57558" class="comment even depth-4 media comment-57558"> <span class="govuk-visually-hidden">Replies to Duffy></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Mahdi</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-12T10:29:45+00:00">12 March 2020</time> </p> <div class="comment-body"> <p>I love this. You are going above and beyond to handle this issue. Congrats!</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57558" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> </ul></div></li> <li id="comment-57789" class="comment odd alt depth-3 media comment-57789"> <span class="govuk-visually-hidden">Replies to Hanna Laakso></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Hanna Laakso</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-04-08T13:05:56+01:00">08 April 2020</time> </p> <div class="comment-body"> <p>As promised, here's a link to the GOV.UK Design System guidance on how to help users to recover from validation errors: <a href="https://design-system.service.gov.uk/patterns/validation/" rel="nofollow ugc">https://design-system.service.gov.uk/patterns/validation/</a></p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57789" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> </ul></div></li> </ul></div></li> <li id="comment-57461" class="comment even thread-even depth-1 media comment-57461"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Owen Miller</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T05:07:01+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>This is fantastic. I'll have to get it implemented at my startup</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57461" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57466" class="comment odd alt thread-odd thread-alt depth-1 media comment-57466"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Heather Herbert</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T09:29:04+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>Additionally, when entering some "numbers" such as credit card information you may want to allow the user to add a space i.e. 4544 4444 4444... This doesn't work with type=number</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57466" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57467" class="comment even thread-even depth-1 media comment-57467"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Anthony Owide</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T10:14:57+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>This has blown my tiny mind! Thanks for sharing your research 🙂</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57467" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57468" class="comment odd alt thread-odd thread-alt depth-1 media comment-57468"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Salomao Rodrigues</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T10:38:11+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>Could the author of this blog post explain the points outlined by @Brandon Heyer?</p> <p>Looking at caniuse.com, inputmode doesn't seem to be well supported at all...</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57468" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment even thread-even depth-1 media unstyled comment-57468"> <li id="comment-57470" class="comment odd alt depth-2 media comment-57470"> <span class="govuk-visually-hidden">Replies to Salomao Rodrigues></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Hanna Laakso</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T12:22:48+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>Hi Salomao,</p> <p>Thanks for your comment.</p> <p>`inputmode` brings up the large buttoned number keypad for users on mobile. All the <a href="https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in)" rel="nofollow ugc">mobile browsers that we test in</a> now <a href="http://(https://caniuse.com/#search=inputmode" rel="nofollow ugc">support `inputmode`</a>: that’s Safari and Chrome on iOS, and Chrome and Samsung Internet on Android.</p> <p>I hope this helps.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57470" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment even depth-2 media unstyled comment-57470"> <li id="comment-57531" class="comment odd alt depth-3 media comment-57531"> <span class="govuk-visually-hidden">Replies to Hanna Laakso></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Nicholas Johnson</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-08T15:08:38+00:00">08 March 2020</time> </p> <div class="comment-body"> <p>And mobile is all we really care about here. Inputmode would have be effect on a desktop device.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57531" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> </ul></div></li> </ul></div></li> <li id="comment-57471" class="comment even thread-odd thread-alt depth-1 media comment-57471"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">isral Duke</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T13:18:25+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>This is fascinating. i didn’t even know about the pattern and inputmode attributes. i’ll be implementing this in my own work. thank you for writing this.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57471" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57475" class="comment odd alt thread-even depth-1 media comment-57475"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Rob Schlüter</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T16:19:13+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>"Until now, the GOV.UK Design System date input component used the HTML element <input type=”number”> to provide this number keypad when a user enters dates."</p> <p>Why use input type 'number' or 'text' when a specific date type exists? That informs the browser the exact intent of the field so it can provide a matching user interface.</p> <p>By using number of text that intent is missing and developers have to add extra labels, upper/lower limts or regexes as described.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57475" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment even thread-odd thread-alt depth-1 media unstyled comment-57475"> <li id="comment-57493" class="comment odd alt depth-2 media comment-57493"> <span class="govuk-visually-hidden">Replies to Rob Schlüter></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Hanna Laakso</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-02T17:24:02+00:00">02 March 2020</time> </p> <div class="comment-body"> <p>Hi Rob,</p> <p>Thanks for your comment.</p> <p>There are a number of accessibility and usability problems with the way browsers implement `<input type"date">`. This article is an interesting read on the topic: <a href="https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/" rel="nofollow ugc">https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/</a></p> <p>I hope this helps.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57493" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> </ul></div></li> <li id="comment-57476" class="comment even thread-even depth-1 media comment-57476"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Quentin Bellanger</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T16:45:10+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>I would add that browsers handle and parse decimal separators (, or .) differently depending on user's language settings.</p> <p>Thanks for the explanation, great post, as usual. ?</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57476" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57477" class="comment odd alt thread-odd thread-alt depth-1 media comment-57477"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Remi Shergold</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-02-28T20:30:38+00:00">28 February 2020</time> </p> <div class="comment-body"> <p>This was a really interesting read. We use gov.uk design advice extensively in our UX team.</p> <p>We're a blue chip financial company with public facing apps that often require high value currency inputs. Say we ask a user to enter the value of their house, they may enter "300000" "300,000" "300,000.00" "300.000,00"(German et al) the list goes on. </p> <p>It's hotly debated if we should use the number input. The main arguments for is the keypad on mobile and that it helps users with screen readers.</p> <p>Is there any official advice on currency number inputs? It's a little surprising there isn't a dedicated component for this in the gov.uk design system.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57477" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment even thread-even depth-1 media unstyled comment-57477"> <li id="comment-57495" class="comment odd alt depth-2 media comment-57495"> <span class="govuk-visually-hidden">Replies to Remi Shergold></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Alistair MacDonald</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-02T21:29:35+00:00">02 March 2020</time> </p> <div class="comment-body"> <p>Is it possible to use a opacity=0.0 number input to trigger the keypad, but have each digit/symbol entered pass through to a handler that processes the result and places it in a text box?</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57495" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> </ul></div></li> <li id="comment-57486" class="comment even thread-odd thread-alt depth-1 media comment-57486"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">concernedCitizen</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-01T14:03:55+00:00">01 March 2020</time> </p> <div class="comment-body"> <p>You have to ask yourself if the government is focusing on the wrong areas?<br /> Yes a certain level of accessibility is required for such far reaching services.<br /> However, one has to way up the value when considering the dire state of other government funded and/or supported technologies.<br /> For example, doctor's surgeries have recently stopped taking repeat prescription orders over the phone. Patients are now required to use either; a website, an app or order in person. Obviously, ordering in person is only feasible for a small percentage of patients.<br /> This leaves a variety of patients left to use the worst app I've seen in a long time. It's called "SystemOnline" and it's basically unusable unless you're less than 40 years old (sorry oldies.)</p> <p>Now I'd rather see government money put towards the creation and maintenance of essential technology's, rather than making services better for the less than 1%. Who most likely have £1000's worth of aids such as; people, glasses, hearing aids, voice input etc etc.</p> <p>My point is, the less than 1% have several alternatives, already catered for by the government. The huge portion of over 40's that are now super frustrated with or not even getting repeat prescriptions is a much larger issue. Which could be solved by the same people who are essentially hacking together a super small improvement for screen readers; which will most likely only stay relevant for 1 or 2 years.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57486" rel="external nofollow">Link to this comment</a> </div> </div> <ul class="comment odd alt thread-even depth-1 media unstyled comment-57486"> <li id="comment-57501" class="comment even depth-2 media comment-57501"> <span class="govuk-visually-hidden">Replies to concernedCitizen></span> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">devops</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-03T19:16:36+00:00">03 March 2020</time> </p> <div class="comment-body"> <p>Check the article again. The implications of the issues with input number type are fairly wide-reaching when it concerns numerical accuracy, not just screen readers. This article is like pointing out an issue with a certain engine component and your response is like asking the same team to fix a car.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57501" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> </ul></div></li> <li id="comment-57508" class="comment odd alt thread-odd thread-alt depth-1 media comment-57508"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">gandharv garg</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-04T18:29:24+00:00">04 March 2020</time> </p> <div class="comment-body"> <p>Great stuff!! Killing it gov.uk</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57508" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57516" class="comment even thread-even depth-1 media comment-57516"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Derrick</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-05T19:27:35+00:00">05 March 2020</time> </p> <div class="comment-body"> <p>This is really helpful</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57516" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57518" class="comment odd alt thread-odd thread-alt depth-1 media comment-57518"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Andrew</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-05T22:09:07+00:00">05 March 2020</time> </p> <div class="comment-body"> <p>There is another reason not to use type=“number”, and that is, unless the number is regarded as valid by the browser then change/input events won’t send out the actual value that the user input. They will instead send out a blank string. This means you cannot run a custom validation library on the user input, and so you are at risk of losing users’ input data because you can’t capture what they have typed.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57518" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57532" class="comment even thread-even depth-1 media comment-57532"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">zakius</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-08T21:20:03+00:00">08 March 2020</time> </p> <div class="comment-body"> <p>since when "only Blink supports it" is good enough?</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57532" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> <li id="comment-57538" class="comment odd alt thread-odd thread-alt depth-1 media comment-57538"> <div class="media-body"> <p class="govuk-body media-heading"> <span class="govuk-visually-hidden">Comment by</span> <span class="author">Chris Moore MBE</span> <span class="govuk-visually-hidden">posted on </span> <time datetime="2020-03-09T15:46:27+00:00">09 March 2020</time> </p> <div class="comment-body"> <p>Fantastic to finally see Android support this pattern. To get around this in the past we had to use the 'tel' input type to ensure a numeric keypad was displayed on Chrome web browses.</p> <div class="comment-links"> <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/#comment-57538" rel="external nofollow">Link to this comment</a> </div> </div> </div></li> </ol> </section><!-- /#comments --> </div> <div class="govuk-grid-column-one-third sidebar-contain"> <div class="sidebar"> <h2 class="govuk-heading-m govuk-visually-hidden">Related content and links</h2> <section class="widget about_widget"><h3>Technology in government</h3><p>This is for everyone: documenting how we're building, assembling and running digital and technology projects across the UK government. <a href="https://technology.blog.gov.uk/2013/11/29/welcome-to-gds-technology/">Find out more</a>. </p> </section><section class="widget categories-2 widget_categories"><div class="widget-inner"><h3>Categories</h3><form action="https://technology.blog.gov.uk" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name='cat' id='cat' class='postform'> <option value='-1'>Select Category</option> <option class="level-0" value="298">APIs</option> <option class="level-0" value="1">Chat</option> <option class="level-0" value="291">CTO Council</option> <option class="level-0" value="269">Data</option> <option class="level-0" value="128">Digital Marketplace</option> <option class="level-0" value="209">Event</option> <option class="level-0" value="106">GaaP</option> <option class="level-0" value="3">GOV.UK</option> <option class="level-0" value="296">GOV.UK Notify</option> <option class="level-0" value="282">GOV.UK PaaS</option> <option class="level-0" value="303">GOV.UK Pay</option> <option class="level-0" value="41">GOV.UK Performance</option> <option class="level-0" value="59">GOV.UK Verify</option> <option class="level-0" value="222">HM Land Registry</option> <option class="level-0" value="27">Jobs</option> <option class="level-0" value="72">Links</option> <option class="level-0" value="201">News</option> <option class="level-0" value="177">Open Source</option> <option class="level-0" value="248">Open Standards</option> <option class="level-0" value="268">Security</option> <option class="level-0" value="29">Tools</option> <option class="level-0" value="58">Transformation</option> <option class="level-0" value="94">Uncategorized</option> </select> </form><script type="text/javascript"> /* <![CDATA[ */ (function() { var dropdown = document.getElementById( "cat" ); function onCatChange() { if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) { dropdown.parentNode.submit(); } } dropdown.onchange = onCatChange; })(); /* ]]> */ </script> </div></section><section class="widget text-4 widget_text"><div class="widget-inner"><h3>Work with us</h3> <div class="textwidget"><p><img loading="lazy" decoding="async" class="aligncenter wp-image-4786 size-medium" src="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2021/02/14084166653_8f877ff8f8_o-300x200.jpg" alt="A sticky note reads "Everybody helps to fix the build"." width="300" height="200" srcset="https://technology.blog.gov.uk/wp-content/uploads/sites/31/2021/02/14084166653_8f877ff8f8_o-300x200.jpg 300w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2021/02/14084166653_8f877ff8f8_o-1024x683.jpg 1024w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2021/02/14084166653_8f877ff8f8_o-768x512.jpg 768w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2021/02/14084166653_8f877ff8f8_o-scaled.jpg 1536w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2021/02/14084166653_8f877ff8f8_o-2048x1365.jpg 2048w, https://technology.blog.gov.uk/wp-content/uploads/sites/31/2021/02/14084166653_8f877ff8f8_o-435x290.jpg 435w" sizes="auto, (max-width: 300px) 100vw, 300px" /></p> <p>If you’re interested in jobs in this field, check out all open opportunities on the <a href="https://gdscareers.gov.uk/">GDS careers</a> site.</p> </div> </div></section><section class="widget feed_email_widget-2 feed_email_widget"><div class="widget-inner"> <h3>Sign up and manage updates</h3> <div class="subscribe icons-buttons"> <ul> <li> <a aria-label="Sign up and manage updates by email" href="/subscribe/" class="email">Email</a> </li> <li> <a aria-label="Use this with a feed reader to subscribe" href="https://technology.blog.gov.uk/feed/" class="feed">Atom</a> </li> </ul> <div class="govuk-clearfix"></div> </div> </div></section><section class="widget text-5 widget_text"><div class="widget-inner"><h3>Find out more</h3> <div class="textwidget"><p><a href="https://technology.blog.gov.uk/join-the-conversation/">Join the conversation</a></p> </div> </div></section> <section class="widget recent-posts-2 widget_recent_entries"><div class="widget-inner"> <h3>Recent Posts</h3> <ul> <li> <a href="https://technology.blog.gov.uk/2024/09/20/the-5-year-journey-to-moving-gov-uk-to-a-new-registry/">The 5 year journey to moving .gov.uk to a new registry</a> <span class="post-date">20 September 2024</span> </li> <li> <a href="https://technology.blog.gov.uk/2024/05/10/missing-the-pointer/">Missing the Point(er)</a> <span class="post-date">10 May 2024</span> </li> <li> <a href="https://technology.blog.gov.uk/2024/02/16/how-our-domains-data-sharing-beta-aims-to-reduce-domain-vulnerabilities/">How our Domains Data Sharing beta aims to reduce domain vulnerabilities</a> <span class="post-date">16 February 2024</span> </li> </ul> </div></section><section class="widget text-3 widget_text"><div class="widget-inner"><h3>Comments and moderation</h3> <div class="textwidget"><a href="https://gdstechnology.blog.gov.uk/blog-comment-and-moderation-guidelines/">Read our guidelines</a></div> </div></section></div> </div> </main> </div> <footer class="govuk-footer js-footer" role="contentinfo"> <div class="govuk-width-container"> <div class="govuk-footer__meta"> <div class="govuk-footer__meta-item govuk-footer__meta-item--grow"> <h2 class="govuk-visually-hidden">Useful links</h2> <ul id="menu-footer" class="govuk-footer__inline-list"> <li class="govuk-footer__inline-list-item menu-all-government-blogs"><a class="govuk-footer__link" href="https://www.blog.gov.uk">All GOV.UK blogs</a></li> <li class="govuk-footer__inline-list-item menu-all-government-blog-posts"><a class="govuk-footer__link" href="https://www.blog.gov.uk/all-posts/">All GOV.UK blog posts</a></li> <li class="govuk-footer__inline-list-item menu-gov-uk"><a class="govuk-footer__link" href="https://www.gov.uk">GOV.UK</a></li> <li class="govuk-footer__inline-list-item menu-all-departments"><a class="govuk-footer__link" href="https://www.gov.uk/government/organisations">All departments</a></li> <li class="govuk-footer__inline-list-item menu-a11y"><a class="govuk-footer__link" href="https://www.blog.gov.uk/accessibility-statement/">Accessibility statement</a></li> <li class="govuk-footer__inline-list-item menu-cookies"><a class="govuk-footer__link" href="https://www.blog.gov.uk/cookies">Cookies</a></li> </ul> <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"> <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> </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> <div id="global-app-error" class="app-error hidden"></div> <script type="text/javascript"> /* <![CDATA[ */ var relevanssi_rt_regex = /(&|\?)_(rt|rt_nonce)=(\w+)/g var newUrl = window.location.search.replace(relevanssi_rt_regex, '') history.replaceState(null, null, window.location.pathname + newUrl + window.location.hash) /* ]]> */ </script> </body> </html>