Do not split up expected form groupings
Design

Some groupings like username and password are so commonly expected that both people and browsers can struggle if they are changed.

Typical example that causes barriers

This can happen if systems have non-standard patterns, for example needing extra details to sign in.

Contents

Open this example in a new tab

<span class="govuk-caption-xl">
  Original version
</span>
<h1 class="govuk-heading-l">
  Log in
</h1>
<form class="form" action="#" method="post">
  <div class="govuk-form-group">
    <div class="govuk-form-group">
      <label class="govuk-label" for="username">
        User ID
      </label>
      <div id="username-hint" class="govuk-hint">
        This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us.
      </div>
      <input
        class="govuk-input govuk-!-width-one-half" id="username" name="username" type="text" spellcheck="false" aria-describedby="username-hint" autocomplete="username">
    </div>
    <p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my user ID</a></p>
    <div class="govuk-form-group">
      <label class="govuk-label" for="surname">
        Surname
      </label>
      <div id="surname-hint" class="govuk-hint">
        This must be the name registered to the account
      </div>
      <input
        class="govuk-input govuk-!-width-one-half" id="surname" name="surname" type="text" spellcheck="false" aria-describedby="surname-hint" autocomplete="family-name">
    </div>
    <div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
      <label class="govuk-label" for="password-input">
        Password
      </label>
      <div class="govuk-input__wrapper govuk-password-input__wrapper">
        <input
          class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-!-width-one-half" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
        <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button"
          aria-controls="password-input" aria-label="Show password" hidden>
          Show
        </button>
      </div>
    </div>
    <p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my password</a></p>
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>

  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".
    It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
  }) if reviewed and reviewAgain }}



    {%- from "govuk/components/tag/macro.njk" import govukTag -%}


  <span class="govuk-caption-xl">
          Original version
        </span>




                  <h1 class="govuk-heading-l">
                    Log in

                  </h1>

        <form class="form" action="#" method="post">



          <div class="govuk-form-group">



          {{ govukInput({
            label: {
              text: "User ID"
            },
            hint: {
              text: "This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us."
            },
            id: "username",
            name: "username",
            classes: "govuk-!-width-one-half",
            autocomplete: "username",
            spellcheck: false
          }) }}

<p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my user ID</a></p>

          {{ govukInput({
            label: {
              text: "Surname"
            },
            hint: {
              text: "This must be the name registered to the account"
            },
            id: "surname",
            name: "surname",
            classes: "govuk-!-width-one-half",
            autocomplete: "family-name",
            spellcheck: false
          }) }}


          {{ govukPasswordInput({
            label: {
              text: "Password"
            },
            classes: "govuk-!-width-one-half",
            id: "password-input",
            name: "password"
          }) }}

          <p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my password</a></p>

</div>


<button type="submit" class="govuk-button" data-module="govuk-button">
  Continue
</button>



          </form>


  {{ appProseScope(content) if content }}

This will not work at all without autocomplete tagging (as mentioned in coding mistakes). However, even with autocomplete examples, this breaks user mental models for account fields, and also means browsers may have unexpected results.

Improved version

Contents

Open this example in a new tab

<span class="govuk-caption-xl">
  Improved version
</span>
<h1 class="govuk-heading-l">
  Log in
</h1>
<form class="form" action="#" method="post">
  <div class="govuk-form-group">
    <div class="govuk-form-group">
      <label class="govuk-label" for="surname">
        Surname
      </label>
      <div id="surname-hint" class="govuk-hint">
        This must be the name registered to the account
      </div>
      <input
        class="govuk-input govuk-!-width-one-half" id="surname" name="surname" type="text" spellcheck="false" aria-describedby="surname-hint" autocomplete="family-name">
    </div>
    <div class="govuk-form-group">
      <label class="govuk-label" for="username">
        User ID
      </label>
      <div id="username-hint" class="govuk-hint">
        This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us.
      </div>
      <input
        class="govuk-input govuk-!-width-one-half" id="username" name="username" type="text" spellcheck="false" aria-describedby="username-hint" autocomplete="username">
    </div>
    <p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my user ID</a></p>
    <div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
      <label class="govuk-label" for="password-input">
        Password
      </label>
      <div class="govuk-input__wrapper govuk-password-input__wrapper">
        <input
          class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-!-width-one-half" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
        <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button"
          aria-controls="password-input" aria-label="Show password" hidden>
          Show
        </button>
      </div>
    </div>
    <p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my password</a></p>
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>

  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".
    It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
  }) if reviewed and reviewAgain }}



    {%- from "govuk/components/tag/macro.njk" import govukTag -%}


  <span class="govuk-caption-xl">
          Improved version
        </span>




                          <h1 class="govuk-heading-l">
                            Log in

                          </h1>

                <form class="form" action="#" method="post">



                  <div class="govuk-form-group">

                    {{ govukInput({
                      label: {
                        text: "Surname"
                      },
                      hint: {
                        text: "This must be the name registered to the account"
                      },
                      id: "surname",
                      name: "surname",
                      classes: "govuk-!-width-one-half",
                      autocomplete: "family-name",
                      spellcheck: false
                    }) }}


                  {{ govukInput({
                    label: {
                      text: "User ID"
                    },
                    hint: {
                      text: "This is 11 digits long and starts with an 11, 21, 31 or 41. You will find it on any letters or emails from us."
                    },
                    id: "username",
                    name: "username",
                    classes: "govuk-!-width-one-half",
                    autocomplete: "username",
                    spellcheck: false
                  }) }}

        <p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my user ID</a></p>



                  {{ govukPasswordInput({
                    label: {
                      text: "Password"
                    },
                    classes: "govuk-!-width-one-half",
                    id: "password-input",
                    name: "password"
                  }) }}

                  <p class="govuk-body"><a class="govuk-link" href="#">I have forgotten my password</a></p>

        </div>


        <button type="submit" class="govuk-button" data-module="govuk-button">
          Continue
        </button>



                  </form>


          {{ appProseScope(content) if content }}

Restructuring the input fields to follow existing form grouping means both people and browers are more likely to be able to correctly input the fields.

Links

• Complex question pages on the GOV.UK Design system