Merge pull request #1527 from htmlandbacon/feature/adding-input-mode

Adding inputmode option to input component

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ## Unreleased
 
+###  Inputmode
+
+Adds the ability to pass an optional [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) into the input component
+
+```javascript
+govukInput({
+  inputmode: 'email'
+})
+```
+
+- [Pull request #1527: Adding inputmode to input component](https://github.com/alphagov/govuk-frontend/pull/1527)
+
+
 ### Fixes
 
 - [Pull request #1512: Update components to only output items when they are defined](https://github.com/alphagov/govuk-frontend/pull/1512).

src/govuk/components/input/input.yaml

@@ -11,6 +11,10 @@ params:
   type: string
   required: false
   description: Type of input control to render. Defaults to "text".
+- name: inputmode
+  type: string
+  require: false
+  description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
 - name: value
   type: string
   required: false

src/govuk/components/input/template.njk

@@ -42,5 +42,6 @@
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
 </div>

src/govuk/components/input/template.test.js

@@ -341,4 +341,15 @@ describe('Input', () => {
       expect($component.attr('autocomplete')).toEqual('postal-code')
     })
   })
+
+  describe('when it includes an inputmode', () => {
+    it('renders with an inputmode attached to the input', () => {
+      const $ = render('input', {
+        inputmode: 'decimal'
+      })
+
+      const $component = $('.govuk-form-group > .govuk-input')
+      expect($component.attr('inputmode')).toEqual('decimal')
+    })
+  })
 })