diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml index 439bc6a333..ecf3b163e0 100644 --- a/packages/govuk-frontend/src/govuk/components/input/input.yaml +++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml @@ -139,23 +139,6 @@ params: type: boolean required: false description: Optional field to enable or disable the `spellcheck` attribute on the input. - - name: autocapitalize - type: string - required: false - description: Optional field to enable or disable autocapitalisation of user input. See [autocapitalization](https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization) for a full list of values that can be used. - - name: inputWrapper - type: object - required: false - description: If any of `prefix`, `suffix`, `formGroup.beforeInput` or `formGroup.afterInput` have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. - params: - - name: classes - type: string - required: false - description: Classes to add to the wrapping element. - - name: attributes - type: object - required: false - description: HTML attributes (for example data attributes) to add to the wrapping element. - name: attributes type: object required: false @@ -296,14 +279,6 @@ examples: name: spellcheck type: text spellcheck: false - - name: with autocapitalize turned off - options: - label: - text: Autocapitalize is turned off - id: input-with-autocapitalize-off - name: autocapitalize - type: text - autocapitalize: none - name: with prefix options: @@ -399,6 +374,14 @@ 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: with describedBy hidden: true options: @@ -547,18 +530,3 @@ examples: html: kg attributes: data-attribute: value - - name: with customised input wrapper - hidden: true - options: - label: - text: Cost per item, in pounds - id: input-with-customised-input-wrapper - name: cost - inputWrapper: - classes: app-input-wrapper--custom-modifier - attributes: - data-attribute: value - prefix: - text: £ - suffix: - text: per item diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk index bb4666d4ac..e6ba97d44c 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,43 @@ {%- 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 +105,7 @@ {% endif %} {%- if hasPrefix or hasSuffix or hasBeforeInput or hasAfterInput %} -