Skip to main content
Unified Design System
Search the Design System
Ver. 3.0.0 For the older version visit v2 documentation

Addresses

Help users provide addresses.

When to use this pattern

Follow this pattern whenever you need to display or ask users for an address.

Only ask for people’s address if you need that information to deliver a service and you cannot get the information from data we already have (for example from an API call with the Civil Registry and Migration Department).

How it works

Follow the instructions on how to ask and display addresses.

How to ask

Depending on the case, you might ask for local (Cypriot) or international address.

Cypriot address lookup

An address lookup helps users find a full address from partial information such as a postcode.

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

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

Use the following flow to ask for a Cypriot address with the address lookup:

  1. Use a whole number numeric input to ask users to enter their postcode.
  2. Ask the user’s to select their street based on the post code provided. You can use a select component for this.
  3. Use text inputs to ask the users to enter the street number and optionally the apartment number. Also show the users their selected ‘postcode’, ‘street’, ‘city or village’ and ‘district’, and provide them with a ‘Continue’ primary button to store the address.

For each step of the address lookup, use a secondary button labeled Search to allow user’s to search for streets based on the provided postcode. This allows the user to search again for streets at any time of the process.

Remember to run validations for each step and follow the instructions for error messages and error summary when validating user input.

Flow of Cypriot address lookup

When using an address lookup, you should:

  • make it clear that it will only work for Cypriot addresses
  • provide a manual option for people with international addresses or addresses that are missing or not properly listed in the address lookup.

Manual address

If you use multiple text inputs, you should:

  • only make individual text inputs mandatory if you really need the information
  • use text inputs the appropriate width for the content – it helps people understand the form, for example, make postcode text inputs shorter than street text inputs

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.

Use the autocomplete attribute on each individual address field to help users enter their address more quickly. This allows you to specify each input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.

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 autocomplete 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

Cypriot manual address

Only use Cypriot manual address when you know the addresses will come from Cyprus only and can cannot implement the Cypriot address lookup.

Example

What is your address?

HTML code

<form class="govcy-form" novalidate action="">
    <fieldset class="govcy-fieldset">
        <legend class="govcy-legend"><h1>What is your address?</h1></legend>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="cyManualAddressLine1">Address line 1</label>
               <input id="cyManualAddressLine1" name="cyManualAddressLine1" type="text" class="govcy-text-input" autocomplete="address-line1"> 
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="cyManualAddressLine2">Address line 2 (optional)</label>
                <input id="cyManualAddressLine2" name="cyManualAddressLine2" type="text" class="govcy-text-input" autocomplete="address-line2">  
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="cyManualTownOrCity">Town or city</label>
                <input id="cyManualTownOrCity" name="cyManualTownOrCity" type="text" class="govcy-text-input" autocomplete="address-level2">
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="cyManualPostalCode">Postcode</label>
            <input id="cyManualPostalCode" name="cyManualPostalCode" type="text" class="govcy-text-input govcy-text-input-char_4 " autocomplete="postal-code">
        </div>
    </fieldset>
</form>

International manual address

Depending on the service, you might allow users to enter international address. Use the manual address and add a dropdown of all countries other than Cyprus.

Example

What is your address?

HTML code

<form class="govcy-form" novalidate action="">
    <fieldset class="govcy-fieldset">
        <legend class="govcy-legend"><h1>What is your address?</h1></legend>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="intManualAddressLine1">Address line 1</label>
               <input id="intManualAddressLine1" name="intManualAddressLine1" type="text" class="govcy-text-input" autocomplete="address-line1"> 
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="intManualAddressLine2">Address line 2 (optional)</label>
                <input id="intManualAddressLine2" name="intManualAddressLine2" type="text" class="govcy-text-input" autocomplete="address-line2">  
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="intManualTownOrCity">Town or city</label>
                <input id="intManualTownOrCity" name="intManualTownOrCity" type="text" class="govcy-text-input" autocomplete="address-level2">
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="intManualPostalCode">Postcode</label>
            <input id="intManualPostalCode" name="intManualPostalCode" type="text" class="govcy-text-input govcy-text-input-char_20 " autocomplete="postal-code">
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="country">Country</label>
            <select id="country" name="country" class="govcy-select" enterkeyhint="done" autocomplete="country">
                <option selected="selected">Select country</option>
                <option value="660">AFGHANISTAN</option>
                ...
                ...
                ...
            </select>
        </div>
    </fieldset>
</form>

Cypriot PO Box

If your service allows it, give the option to enter PO boxes. To allow users to enter PO box use the following:

Example

What is your PO Box?

HTML code

<form class="govcy-form" novalidate action="">
    <fieldset class="govcy-fieldset">
        <legend class="govcy-legend"><h1>What is your PO Box?</h1></legend>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="cyPob">PO box</label>
                <input id="cyPob" name="cyPob" value="" type="text" class="govcy-text-input govcy-text-input-char_5" >
        </div>
        <div class="govcy-form-control">
            <label class="govcy-label govcy-label-primary" for="cyPobPostalCode">Postcode</label>
                <input id="cyPobPostalCode" name="cyPobPostalCode" value="" type="text" class="govcy-text-input govcy-text-input-char_4" autocomplete="postal-code">
        </div>
    </fieldset>
</form>

Error messages

Make sure to follow the instructions for error messages and error summary when validating user input and to use the text input error variant style.

How to display

Displaying stored or summitted address in the following format:

Address line 1
Address line 2
Postal code, Town
Country

For example:

3 Strovolos Avenue
1234, Strovolos
Cyprus

HTML code

<span class="govcy-d-block">
	3 Strovolos Avenue<br>
	1234, Strovolos<br>
	Cyprus
</span>

If you used a Cypriot lookup address, remember to add the Apartment number if provided and to adjust the Street number depending on the language used.

For example the above example should appear as follows in Greek:
Example

Λεωφόρος Στροβόλου 3
1234, Στρόβολος
Κύπρος

HTML code

<span class="govcy-d-block">
	Λεωφόρος Στροβόλου 3<br>
	1234, Στρόβολος<br>
	Κύπρος
</span>

Pattern text

Use the following text:

Label English Greek
Address line 1 Address line 1 Διεύθυνση, γραμμή 1
Address line 2 Address line 2 (optional) Διεύθυνση, γραμμή 2 (προαιρετικό)
Town Town or city Πόλη ή χωριό
Post code Postcode Ταχυδρομικός κώδικας
Country Country Χώρα
PO box PO box PO box