Make it easy to set autocomplete attributes on form inputs

[36degrees]

What

Make it possible to pass an autocomplete option to:

• Text Inputs
• Textareas
• Character Count
• Date Input

When provided, the autocomplete option should be outputted as an attribute on the input. For example:

{{ govukInput({
  label: {
    text: "Full name"
  },
  autocomplete: "name",
  id: "name",
  name: "name"
}) }}

would output:

<div class="govuk-form-group">
  <label class="govuk-label" for="name">
    Full name
  </label>
  <input class="govuk-input" id="name" name="name" type="text" autocomplete="name">
</div>

Why

WCAG 2.1 introduces a new success criteria "1.3.5 Identify Input Purpose" which "is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities".

Broadly speaking, we can help service teams meet this criteria by making it easier to pass autocomplete attributes to components.

At the minute this can be done by using the attributes option, but making it part of the component API promotes the idea that this should be used when it makes sense to do so.

Done when…

• users can use the autocomplete option with the text input component

  • it's possible to pass an autocomplete option to the component
  • there's a test that ensures that the autocomplete attribute is outputted correctly in the HTML
  • the autocomplete option is documented in the component's YAML file

---

• users can use the autocomplete option with the textarea component

  • it's possible to pass an autocomplete option to the component
  • there's a test that ensures that the autocomplete attribute is outputted correctly in the HTML
  • the autocomplete option is documented in the component's YAML file

---

• users can use the autocomplete option with the date input component

  • it's possible to pass an autocomplete option to the component
  • there's a test that ensures that the autocomplete attribute is outputted correctly in the HTML
  • the autocomplete option is documented in the component's YAML file

[36degrees]

I've removed references to the character count component from this issue, as I can't see a scenario where the character count component would be used on a field that has a sensible autocomplete value (character count for your street-address?!)