Add an icon next to an input using the govukInput macro

[dashouse]

I was trying to replicate this design with the Input macro:

In the end I did this with HTML like this

<div class="govuk-form-group">
  <label class="govuk-label govuk-label--s" for="cvv">
    Card security code
  </label>
  <span id="cvv-hint" class="govuk-hint">
    The last 3 digits on the back of the card
  </span>
  <input class="govuk-input govuk-input--width-4 govuk-!-display-inline-block" id="cvv" name="post-code" type="text">
  <span class="govuk-!-display-inline-block" style="vertical-align: middle; height: 40px;">
    <img alt="image of the back of a bank card" src="https://png.icons8.com/ios/1600/bank-card-back-side.png" style="height: 40px;">
  </span>
</div>

My expectation was that I would be able to import the label, hint, error and input components separately, add in an additional image and wrap it in govuk-form-group - This works, however I was unable to remove the second govuk-form-group that comes with the govukInput macro.

[kr8n3r]

if we added caller to the input, the macro would look like that:

{% call govukInput({
    label: {
      text: 'Card security code',
      classes: 'govuk-label--s'
    },
    hint: {
      text: 'The last 3 digits on the back of the card'
    },
    classes: 'govuk-input--width-4 govuk-!-display-inline-block',
    id: 'cvv'
  }) %}
   <span class="govuk-!-display-inline-block" style="vertical-align: middle; height: 40px;">
    <img alt="image of the back of a bank card" src="https://png.icons8.com/ios/1600/bank-card-back-side.png" style="height: 40px;">
  </span>
{% endcall %}

not sure this is much better than using plain html

Position of the caller depends where the custom content is in relation to the defined output. So in this case you can't magically prepend the image left of the input

[NickColley]

I guess one pseudo code could be:

{% call fieldset() %}
    {{ label() }}
    {{ hint() }}
    {{ input() }}
    <span class="govuk-!-display-inline-block" style="vertical-align: middle; height: 40px;">
        <img alt="image of the back of a bank card" src="https://png.icons8.com/ios/1600/bank-card-back-side.png" style="height: 40px;">
    </span>
{% endcall %}

Of course this would depend on the components being less coupled

[kr8n3r]

yeah that's the alternative. then the question is what is the default output of say {{ input() }} ? if it's just the input and they would need to manually supply the id of it to the label's for attribute, then we're not doing much to help them build stuff over plain html.

sure, no need to specify classes.

[colinrotherham]

I'm going to close this one since we merged support for custom before/after content today 🎉

• https://github.com/alphagov/govuk-frontend/pull/4567