Skip to content

Add error param to input #1150

@penx

Description

@penx

At the moment, date-input passes a CSS class to input when it wants to mark a field as having an error:

classes: "govuk-date-input__input " + (item.classes if item.classes),

name: day
classes: govuk-input--width-2 govuk-input--error

This implies that the user of the date-input has inferred knowledge of the inner workings (CSS class name) of input.

I propose that an 'error' param is added to input so that, when using the input template, the user (be it an application using the input template or another component) doesn't need to have inferred knowledge of the class names. The classes param would still exist so this approach would also still work, but the preferred approach would be to use the error param.

This would mean adding an error param to input as follows:

before:

  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"

after:

  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage | params.error %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"

And changing the date-input examples as follows:

before:

        name: day
        classes: govuk-input--width-2 govuk-input--error

after:

        name: day
        classes: govuk-input--width-2
        error: true

This may seem like a trivial issue for users of the nunjucks templates - but when working on ports (e.g. using CSSinJS or CSS modules) it is useful for one component/template to not have to have knowledge of the inner workings of another.

Metadata

Metadata

Assignees

No one assigned

    Labels

    feature requestUser requests a new feature🕔 hoursA well understood issue which we expect to take less than a day to resolve.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions