Add extra letter spacing modifier for inputs

CHANGELOG.md

@@ -54,6 +54,14 @@ The [Button](https://design-system.service.gov.uk/components/button/) Nunjucks m
 
 This was added in [pull request #3344: Adding optional id attribute to button component](https://github.com/alphagov/govuk-frontend/pull/3344). Thanks to [Tom Billington](https://github.com/TomBillingtonUK) for this contribution.
 
+### Added a modifier for text input styles that accept sequences of digits
+
+We've added a new `.govuk-input--extra-letter-spacing` class for [Text Input](https://design-system.service.gov.uk/components/text-input/). This increases readability of text inputs that receive sequences of digits (like security codes, references or phone numbers).
+
+You can add it through the `classes` option when using Nunjucks, or directly in the `class` attribute of the `<input>` when using HTML.
+
+This was added in [pull request #2230: Add extra letter spacing modifier for inputs](https://github.com/alphagov/govuk-frontend/pull/2230)
+
 ### Deprecated features
 
 #### Stop using the `govuk-button--disabled` class on buttons

src/govuk/components/input/_index.scss

@@ -66,6 +66,11 @@
     }
   }
 
+  .govuk-input--extra-letter-spacing {
+    @include govuk-font(false, $tabular: true);
+    letter-spacing: .05em;
+  }
+
   // em measurements are based on the point size of the typeface
   // Extra space is added on the right hand side to allow for the Safari prefill icon
 

src/govuk/components/input/input.yaml

@@ -311,6 +311,13 @@ examples:
         text: £
       suffix:
         text: per item
+  - name: with extra letter spacing
+    data:
+      id: input-with-extra-letter-spacing
+      label:
+        text: National insurance number
+      classes: govuk-input--width-30 govuk-input--extra-letter-spacing
+      value: QQ 12 34 56 C
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes