Address finder

The Address pattern helps users provide their address using their postcode or by entering it manually.

Usage guidance

Place the burden of correcting formatting on the system not the user. For example, a user should be able to enter their postcode with or without spaces. E.g. ‘N1 9NG’ or ‘N19NG’ are both accepted by the system.

When to use

Wherever possible use the postcode finder with the option to enter addresses manually
Always offer the option to enter their address manually

Manual address entry

Open this example in new tab

What is your address?

Why do we need to know your address?

We'll use your address to search our database. The database contains models of property characteristics based on your address. This helps us predict your energy demands.

Address line 1

Example: 223-231 Pentonville Rd

Address line 2 (optional)

Example: Unit 7, The Lodge

Address line 3 (optional)

Town or city

Postcode

Example: LL13 7AS
Please leave a space between the two parts of the postcode.

Skip manual entry. Find my address

HTML

<fieldset>
  <legend><h3 class="h4 mb-2">What is your address?</h3></legend>
  <div class="mb-4">
    <a class="hint-link" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Why do we need to know your address?
      </a>
    <div class="collapse" id="collapseExample">
      <div class="hint-body">
        We'll use your address to search our database. The database contains models of property characteristics based on your address. This helps us predict your energy demands.
      </div>
    </div>
  </div>
  <div class="mb-4">
    <label for="address_1" class="form-label">Address line 1</label>
    <div class="form-text">Example: 223-231 Pentonville Rd</div>
    <input type="text" class="form-control" id="address_1">
  </div>
  <div class="mb-4">
    <label for="address_2" class="form-label">Address line 2 (optional)</label>
    <div class="form-text">Example: Unit 7, The Lodge</div>
    <input type="text" class="form-control" id="address_2">
  </div>
  <div class="mb-4">
    <label for="address_2b" class="form-label">Address line 3 (optional)</label>
    <input type="text" class="form-control" id="address_2b">
  </div>
  <div class="mb-4">
    <label for="address_3" class="form-label">Town or city</label>
    <input type="text" class="form-control" id="address_3">
  </div>
  <div class="mb-4">
    <label for="postcode" class="form-label">Postcode</label>
    <div class="form-text">Example: LL13 7AS<br>
  Please leave a space between the two parts of the postcode.</div>
    <input type="text" class="form-control form-postcode" id="postcode">
  </div>
  <p>Skip manual entry. <a href="#">Find my address</a></p>
</fieldset>

Address search

Open this example in new tab

What is your address?

Why do we need to know your address?

We'll use your address to search our database. The database contains models of property characteristics based on your address. This helps us predict your energy demands.

Postcode

Example: LL13 7AS
Please leave a space between the two parts of the postcode.

Enter my address manually

HTML

<h3 class="h4 mb-2">What is your address?</h3>
<div class="mb-4">
  <a class="hint-link" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
      Why do we need to know your address?
    </a>
  <div class="collapse" id="collapseExample2">
    <div class="hint-body">
      We'll use your address to search our database. The database contains models of property characteristics based on your address. This helps us predict your energy demands.
    </div>
  </div>
</div>
<div class="mb-4">
  <label for="postcode" class="form-label">Postcode</label>
  <div class="form-text">Example: LL13 7AS<br>
    Please leave a space between the two parts of the postcode.</div>
  <input type="text" class="form-control form-postcode" id="postcode">
</div>
<div class="mb-4">
  <button type="button" class="btn btn-primary">Find address</button>
</div>
<p><a href="#">Enter my address manually</a></p>

Address select

Select correct address

Enter my address manually

HTML

<h3 class="h4 mb-2">Select correct address</h3>
  <p><a href="#">Enter my address manually</a></p>
  <ul class="link-list">
    <li><a href="#">17 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">1 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">2 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">3 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">4 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">5 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">6 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">7 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">8 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">9 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">10 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">11 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">12 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
    <li><a href="#">13 Valley Place, 68 Glenbuck Road, Surbiton, KT6 6DL</a></li>
  </ul>