Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Address lookup

Address pattern

Open this example in a new tab: address-lookup

<div class="form__group  ">  
<fieldset class="form__fieldset form__fieldset--address-lookup">  
  <legend class="form__legend ">Personal address</legend>  
  <p class="form__hint">Use postcode search or enter address manually.</p>  
  <label class="form__label" for="postcodeLookup">Postcode search</label>  
  <div class="form__group form__group--inline">  
    <input autocapitalize="characters" autocomplete="postal-code" autocorrect="off"  
      class="form__input form__input--address-short" id="postcodeLookup" type="text" name="postcodeLookup">  
    <button id="postcodeLookupBtn" class="asp-button">Find address</button>  
  </div>  


  <div id="postcodeLookupAddress" class="form__group form__input--long form__group--hidden">
    <label id="addressSelect" class="form__label" for="idpc_dropdown">Select an address</label>
    <div class="form__input--address" id="postcodeLookupAddressContainer"></div>
  </div>  


  <div class="lookup_field" data-prefix="address-lookup-example_"></div>
  <input id="postcodeApiKey" type="hidden" value="ak_jr1z1gmkIoaMm928AQR8qv8gItCaz" />
</fieldset>
<fieldset id="enterAddress" class="form__fieldset form__fieldset--enter-address ">
  <legend class="form__legend ">Personal address</legend>  


  <div class="form__group">
    <label id="victim-address_line1" class="form__label" for="address-lookup-example_line1">Building and street
      <span class="sr-only">(line 1)</span>
    </label><input required autocapitalize="words" autocomplete="address-line1" autocorrect="off"
      class="form__input form__input--address-long "
      id="address-lookup-example_line1" data-name="Building" name="victim-address_line1" type="text"
      value="" />
    <label class="form__label sr-only" for="address-lookup-example_line2" id="victim-address_line2">Building and
      street (line 2)</label><input autocapitalize="words" autocomplete="address-line2" autocorrect="off"
      class="form__input form__input--address-long "
      id="address-lookup-example_line2" data-name="Street" name="victim-address_line2" type="text"
      value="" />
  </div>  


  <div class="form__group">
    <label class="form__label" id="victim-address_city" for="address-lookup-example_city">Town or city</label><input required autocapitalize="words" autocomplete="address-level2" autocorrect="off" class="form__input " id="address-lookup-example_city" data-name="Town or city"
      name="victim-address_city" type="text" value="" />
  </div>  


  <div class="form__group">
    <label class="form__label" for="address-lookup-example_postcode"x
      id="victim-address_postcode">Postcode</label><input autocapitalize="characters" autocomplete="postal-code" autocorrect="off"
      class="form__input form__input--address-short "
      id="address-lookup-example_postcode" data-name="Postcode" name="victim-address_postcode" type="text"
      value="" />  


  </div>  


  <div class="form__group form__group--hidden">
    <label class="form__label" for="address-lookup-example_longitude"
      id="victim-address_longitude">Longitude</label>  


<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form__input form__input--address-short "</span>  
  <span class="hljs-attr">id</span>=<span class="hljs-string">"address-lookup-example_longitude"</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"Postcode"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"victim-address_longitude"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>  
  <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /&gt;</span>  
  </div>  


  <div class="form__group form__group--hidden">
    <label class="form__label" for="address-lookup-example_latitude"
      id="victim-address_latitude">Latitude</label>  


<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form__input form__input--address-short "</span>  
  <span class="hljs-attr">id</span>=<span class="hljs-string">"address-lookup-example_latitude"</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"Postcode"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"victim-address_latitude"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>  
  <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /&gt;</span>  
  </div>  


  <div class="form__group form__group--hidden">
    <label class="form__label" for="address-lookup-example_buildingNumber"
      id="victim-address_buildingNumber">buildingNumber</label>  


<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form__input form__input--address-short "</span>  
  <span class="hljs-attr">id</span>=<span class="hljs-string">"address-lookup-example_buildingNumber"</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"Postcode"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"victim-address_buildingNumber"</span>  
  <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /&gt;</span>  
  </div>  


  <div class="form__group form__group--hidden">
    <label class="form__label" for="address-lookup-example_buildingName"
      id="victim-address_buildingName">buildingName</label>  


<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form__input form__input--address-short "</span>  
  <span class="hljs-attr">id</span>=<span class="hljs-string">"address-lookup-example_buildingName"</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"Postcode"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"victim-address_buildingName"</span>  
  <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /&gt;</span>  
  </div>  


  <div class="form__group form__group--hidden">
    <label class="form__label" for="address-lookup-example_organisationName"
      id="victim-address_organisationName">organisationName</label>  


<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form__input form__input--address-short "</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"address-lookup-example_organisationName"</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"Postcode"</span>  
  <span class="hljs-attr">name</span>=<span class="hljs-string">"victim-address_organisationName"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /&gt;</span>  
  </div>  


  <div class="form__group form__group--hidden">
    <label class="form__label" for="address-lookup-example_uprn" id="victim-address_uprn">uprn</label>  


<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form__input form__input--address-short "</span>  
  <span class="hljs-attr">id</span>=<span class="hljs-string">"address-lookup-example_uprn"</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"Postcode"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"victim-address_uprn"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>  
  <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /&gt;</span>  
  </div>  


  <div class="form__group form__group--hidden">
    <label class="form__label" for="address-lookup-example_npt" id="victim-address_npt">npt</label>  


<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form__input form__input--address-short "</span>  
  <span class="hljs-attr">id</span>=<span class="hljs-string">"address-lookup-example_npt"</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">"Postcode"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"victim-address_npt"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>  
  <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /&gt;</span>  
  </div>  


  <div class="form__group">
    <label class="form__label" for="address-lookup-example_country" id="victim-address_country">Country</label><input required autocapitalize="words" autocomplete="country-name" autocorrect="off" class="form__input " id="address-lookup-example_country" data-name="Country"
      name="victim-address_country" type="text"
      value=" United Kingdom" />
  </div>
</fieldset>
</div>

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 11 September 2024
Last updated 3 November 2025