diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml index 439bc6a333..6dbe124f05 100644 --- a/packages/govuk-frontend/src/govuk/components/input/input.yaml +++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml @@ -399,6 +399,22 @@ examples: label: text: With value value: QQ 12 34 56 C + - name: zero value + hidden: true + options: + id: with-zero-value + name: with-zero-value + label: + text: With zero value + value: !!int 0 + - name: autocapitalize + hidden: true + options: + label: + text: With autocapitalize + id: with-autocapitalize + name: with-autocapitalize + autocapitalize: none - name: with describedBy hidden: true options: diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk index bb4666d4ac..f34e1dfb13 100644 --- a/packages/govuk-frontend/src/govuk/components/input/template.njk +++ b/packages/govuk-frontend/src/govuk/components/input/template.njk @@ -3,9 +3,20 @@ {% from "../hint/macro.njk" import govukHint %} {% from "../label/macro.njk" import govukLabel %} +{#- Set classes for this component #} +{%- set classNames = "govuk-input" -%} + +{%- if params.classes %} + {% set classNames = classNames + " " + params.classes %} +{% endif %} + +{%- if params.errorMessage %} + {% set classNames = classNames + " govuk-input--error" %} +{% endif %} + {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} -{% set describedBy = params.describedBy if params.describedBy else "" -%} +{% set describedBy = params.describedBy if params.describedBy else undefined -%} {%- set hasPrefix = true if params.prefix and (params.prefix.text or params.prefix.html) else false %} {%- set hasSuffix = true if params.suffix and (params.suffix.text or params.suffix.html) else false %} @@ -13,15 +24,48 @@ {%- set hasAfterInput = true if params.formGroup.afterInput and (params.formGroup.afterInput.text or params.formGroup.afterInput.html) else false %} {%- macro _inputElement(params) -%} - {%- endmacro -%} @@ -66,8 +110,7 @@ {% endif %} {%- if hasPrefix or hasSuffix or hasBeforeInput or hasAfterInput %} -