
<p>Address pattern</p>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot;&gt;<br />
  &lt;fieldset class=\&quot;form__fieldset form__fieldset&#8211;address-lookup\&quot;&gt;<br />
    &lt;legend class=\&quot;form__legend \&quot;&gt;Business address&lt;/legend&gt;<br />
    &lt;p class=\&quot;form__hint\&quot;&gt;Use postcode search or enter address manually.&lt;/p&gt;<br />
    &lt;label class=\&quot;form__label\&quot; for=\&quot;postcodeLookup\&quot;&gt;Postcode search&lt;/label&gt;<br />
    &lt;div class=\&quot;form__group form__group&#8211;inline\&quot;&gt;<br />
      &lt;input autocapitalize=\&quot;characters\&quot; autocomplete=\&quot;postal-code\&quot; autocorrect=\&quot;off\&quot; class=\&quot;form__input form__input&#8211;address-short\&quot; id=\&quot;postcodeLookup\&quot; type=\&quot;text\&quot; name=\&quot;postcodeLookup\&quot;&gt;<br />
      &lt;button id=\&quot;postcodeLookupBtn\&quot; class=\&quot;button button&#8211;start\&quot;&gt;Find address&lt;/button&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=\&quot;postcodeLookupAddress\&quot; class=\&quot;form__group form__input&#8211;long form__group&#8211;hidden\&quot;&gt;<br />
      &lt;label id=\&quot;addressSelect\&quot; class=\&quot;form__label\&quot; for=\&quot;idpc_dropdown\&quot;&gt;Select an address&lt;/label&gt;<br />
      &lt;div class=\&quot;form__input&#8211;address\&quot; id=\&quot;postcodeLookupAddressContainer\&quot;&gt;&lt;/div&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;lookup_field\&quot; data-prefix=\&quot;cbusiness-address-page-business-address_\&quot;&gt;&lt;/div&gt;<br />
    &lt;input id=\&quot;postcodeApiKey\&quot; type=\&quot;hidden\&quot; value=\&quot;ak_jr1z1gmkIoaMm928AQR8qv8gItCaz\&quot;&gt;<br />
  &lt;/fieldset&gt;<br />
  &lt;fieldset id=\&quot;enterAddress\&quot; class=\&quot;form__fieldset form__fieldset&#8211;enter-address\&quot;&gt;<br />
    &lt;legend class=\&quot;form__legend \&quot;&gt;Business address&lt;/legend&gt;<br />
    &lt;div class=\&quot;form__group\&quot;&gt;<br />
      &lt;label id=\&quot;business-address_line1\&quot; class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_line1\&quot;&gt;Building and street<br />
        &lt;span class=\&quot;sr-only\&quot;&gt;(line 1)&lt;/span&gt;<br />
      &lt;/label&gt;&lt;input required=\&quot;\&quot; autocapitalize=\&quot;words\&quot; autocomplete=\&quot;address-line1\&quot; autocorrect=\&quot;off\&quot; class=\&quot;form__input form__input&#8211;address-long \&quot; id=\&quot;cbusiness-address-page-business-address_line1\&quot; item-name=\&quot;Building\&quot; name=\&quot;business-address_line1\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
      &lt;label class=\&quot;form__label sr-only\&quot; for=\&quot;cbusiness-address-page-business-address_line2\&quot; id=\&quot;business-address_line2\&quot;&gt;Building and<br />
      street (line 2)&lt;/label&gt;&lt;input autocapitalize=\&quot;words\&quot; autocomplete=\&quot;address-line2\&quot; autocorrect=\&quot;off\&quot; class=\&quot;form__input form__input&#8211;address-long \&quot; id=\&quot;cbusiness-address-page-business-address_line2\&quot; item-name=\&quot;Street\&quot; name=\&quot;business-address_line2\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; id=\&quot;business-address_city\&quot; for=\&quot;cbusiness-address-page-business-address_city\&quot;&gt;Town or city&lt;/label&gt;&lt;input required=\&quot;\&quot; autocapitalize=\&quot;words\&quot; autocomplete=\&quot;address-level2\&quot; autocorrect=\&quot;off\&quot; class=\&quot;form__input \&quot; id=\&quot;cbusiness-address-page-business-address_city\&quot; item-name=\&quot;Town or city\&quot; name=\&quot;business-address_city\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_postcode\&quot; id=\&quot;business-address_postcode\&quot;&gt;Postcode&lt;/label&gt;&lt;input autocapitalize=\&quot;characters\&quot; autocomplete=\&quot;postal-code\&quot; autocorrect=\&quot;off\&quot; class=\&quot;form__input form__input&#8211;address-short \&quot; id=\&quot;cbusiness-address-page-business-address_postcode\&quot; item-name=\&quot;Postcode\&quot; name=\&quot;business-address_postcode\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group form__group&#8211;hidden\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_longitude\&quot; id=\&quot;business-address_longitude\&quot;&gt;Longitude&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input form__input&#8211;address-short \&quot; id=\&quot;cbusiness-address-page-business-address_longitude\&quot; item-name=\&quot;Postcode\&quot; name=\&quot;business-address_longitude\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group form__group&#8211;hidden\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_latitude\&quot; id=\&quot;business-address_latitude\&quot;&gt;Latitude&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input form__input&#8211;address-short \&quot; id=\&quot;cbusiness-address-page-business-address_latitude\&quot; item-name=\&quot;Postcode\&quot; name=\&quot;business-address_latitude\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group form__group&#8211;hidden\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_buildingNumber\&quot; id=\&quot;business-address_buildingNumber\&quot;&gt;buildingNumber&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input form__input&#8211;address-short \&quot; id=\&quot;cbusiness-address-page-business-address_buildingNumber\&quot; item-name=\&quot;Postcode\&quot; name=\&quot;business-address_buildingNumber\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group form__group&#8211;hidden\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_buildingName\&quot; id=\&quot;business-address_buildingName\&quot;&gt;buildingName&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input form__input&#8211;address-short \&quot; id=\&quot;cbusiness-address-page-business-address_buildingName\&quot; item-name=\&quot;Postcode\&quot; name=\&quot;business-address_buildingName\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group form__group&#8211;hidden\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_organisationName\&quot; id=\&quot;business-address_organisationName\&quot;&gt;organisationName&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input form__input&#8211;address-short \&quot; id=\&quot;cbusiness-address-page-business-address_organisationName\&quot; item-name=\&quot;Postcode\&quot; name=\&quot;business-address_organisationName\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group form__group&#8211;hidden\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_uprn\&quot; id=\&quot;business-address_uprn\&quot;&gt;uprn&lt;/label&gt;<br />
      &lt;input class=\&quot;form__input form__input&#8211;address-short \&quot; id=\&quot;cbusiness-address-page-business-address_uprn\&quot; item-name=\&quot;Postcode\&quot; name=\&quot;business-address_uprn\&quot; type=\&quot;text\&quot; value=\&quot;\&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=\&quot;form__group\&quot;&gt;<br />
      &lt;label class=\&quot;form__label\&quot; for=\&quot;cbusiness-address-page-business-address_country\&quot; id=\&quot;business-address_country\&quot;&gt;Country&lt;/label&gt;&lt;input required=\&quot;\&quot; autocapitalize=\&quot;words\&quot; autocomplete=\&quot;country-name\&quot; autocorrect=\&quot;off\&quot; class=\&quot;form__input \&quot; id=\&quot;cbusiness-address-page-business-address_country\&quot; item-name=\&quot;Country\&quot; name=\&quot;business-address_country\&quot; type=\&quot;text\&quot; value=\&quot; United Kingdom\&quot;&gt;<br />
    &lt;/div&gt;<br />
  &lt;/fieldset&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;66e177a536eb5&quot;, url: &quot;&quot; }) }}