Add inputmode option to the 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')
+ })
+ })
 })