Ask users for Addresses

Help users provide an address using one of the following:

  • Address lookup
  • Multiple text inputs
  • Textarea

Address lookup

When to use an address lookup

Use an address lookup when you’re asking users for a UK address.

When not to use an address lookup

Address lookups generally only work for UK addresses. Use a manual option such as multiple text inputs or a textarea when you are collecting mostly or only international addresses

How an address lookup works

An address lookup lets users specify a UK address by entering their postcode and selecting their address from a list. There is also an option to enter a street name or number.

When using an address lookup, you should:

  • make it clear that it will only work for UK addresses
  • provide a manual option for people with international addresses or addresses that are missing or not properly listed in the address lookup
  • let people enter their postcodes in upper or lower case and with or without spaces

Multiple text inputs

Open this "Multiple text inputs Addresses" example in a new window
HTML
<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    <h1 class="govuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-line-1">
      Building and street
      <span class="govuk-visually-hidden">line 1 of 2</span>
    </label>
    <input class="govuk-input" id="address-line-1" name="address-line-1" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-line-2">
      <span class="govuk-visually-hidden">Building and street line 2 of 2</span>
    </label>
    <input class="govuk-input" id="address-line-2" name="address-line-2" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-town">
      Town or city
    </label>
    <input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-county">
      County
    </label>
    <input class="govuk-input govuk-!-width-two-thirds" id="address-county" name="address-county" type="text">
  </div>

  <div class="govuk-form-group">
    <label class="govuk-label" for="address-postcode">
      Postcode
    </label>
    <input class="govuk-input govuk-input--width-10" id="address-postcode" name="address-postcode" type="text">
  </div>

</fieldset>
Nunjucks
{% from "input/macro.njk" import govukInput %}
{% from "fieldset/macro.njk" import govukFieldset %}

{% call govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) %}

  {{ govukInput({
    label: {
      html: 'Building and street <span class="govuk-visually-hidden">line 1 of 2</span>'
    },
    id: "address-line-1",
    name: "address-line-1"
  }) }}

  {{ govukInput({
    label: {
      html: '<span class="govuk-visually-hidden">Building and street line 2 of 2</span>'
    },
    id: "address-line-2",
    name: "address-line-2"
  }) }}

  {{ govukInput({
    label: {
      text: "Town or city"
    },
    classes: "govuk-!-width-two-thirds",
    id: "address-town",
    name: "address-town"
  }) }}

  {{ govukInput({
    label: {
      text: "County"
    },
    classes: "govuk-!-width-two-thirds",
    id: "address-county",
    name: "address-county"
  }) }}

  {{ govukInput({
    label: {
      text: "Postcode"
    },
    classes: "govuk-input--width-10",
    id: "address-postcode",
    name: "address-postcode"
  }) }}

{% endcall %}

When to use multiple text inputs

Only use multiple text inputs when you know which countries the addresses will come from and can find a format that supports them all. This can be difficult to know if you’re asking for addresses outside of the UK.

How multiple text inputs work

Using multiple text inputs means:

  • you can easily extract and use specific parts of an address
  • you can give help for individual text inputs
  • you can validate each part of the address separately
  • users can complete the form using their browser’s auto-complete function

The disadvantages of using multiple text inputs are that:

  • it’s hard to find a single format that works for all addresses
  • there’s no guarantee that users will use the text inputs the way you think they will
  • users cannot easily paste addresses from their clipboards

If you use multiple text inputs, you should:

  • only make individual text inputs mandatory if you really need the information
  • make the text inputs the appropriate length for the content - it helps people understand the form, for example, make postcode text inputs shorter than street text inputs
  • let people enter their postcodes in upper or lower case and with or without spaces

Make sure there are enough text inputs to accommodate longer addresses if you know your users will need them. For example, allow users to include a company name or flat number.

Royal Mail does not need a county as long as the town and postcode are included. You should include an optional county text input so that people who do not know their postcode can give a valid address.

Error messages

Error messages should be styled like this:

Open this "Postcode error" example in a new window
HTML
<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="address-postcode">
    Postcode
  </label>
  <span id="address-postcode-error" class="govuk-error-message">
    Enter a real postcode
  </span>
  <input class="govuk-input govuk-input--width-10 govuk-input--error" id="address-postcode" name="address-postcode" type="text" value="Not a postcode" aria-describedby="address-postcode-error">
</div>
Nunjucks
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Postcode"
  },
  classes: "govuk-input--width-10",
  id: "address-postcode",
  name: "address-postcode",
  value: "Not a postcode",
  errorMessage: {
    text: "Enter a real postcode"
  }
}) }}

Make sure errors follow the guidance in error message and have specific error messages for specific error states.

Textarea

Open this "Textarea addresses" example in a new window
HTML
<div class="govuk-form-group">
  <label class="govuk-label" for="address">
    What is your address?
  </label>
  <textarea class="govuk-textarea" id="address" name="address" rows="5"></textarea>
</div>
Nunjucks
{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  name: "address",
  id: "address",
  label: {
    text: "What is your address?"
  }
}) }}

When to use textarea

Use a textarea if you expect a broad range of address formats and you do not need to format the address for print or use specific sub-parts of the address (for example, street or postcode).

When not to use textarea

You should not use a textarea if you:

  • need to separate an address into accurate sub-parts (for example, street or postcode)
  • need to help users look up an address

How a textarea works

Textareas let users enter an address in any format and make it easy to copy and paste addresses from their clipboard.

Research on this pattern

If you’ve used this pattern, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Addresses’ on GitHub