|
| 1 | +--- |
| 2 | +title: Address lookup |
| 3 | +tabs: true |
| 4 | +status: Experimental |
| 5 | +statusDate: September 2025 |
| 6 | +excerpt: "" |
| 7 | +lede: "" |
| 8 | +githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/categories/experimental-components-pages-and-patterns |
| 9 | + |
| 10 | + |
| 11 | +--- |
| 12 | + |
| 13 | +{% tabs "paginate" %} |
| 14 | +{% tab "Overview" %} |
| 15 | + |
| 16 | +<div class="img-container"> |
| 17 | + <img src="/assets/images/submission-1757076520937/Screenshot-2025-09-05-at-13.40.22.png" alt="Address lookup" /> |
| 18 | +</div> |
| 19 | + |
| 20 | +## Overview |
| 21 | +The address lookup component allows users to quickly find and select an address by typing part of the address or postcode into a search field. As the user types, a list of matching addresses appears in a dropdown, from which the correct option can be chosen. This approach reduces the need for users to enter full address details manually and helps avoid errors from incomplete or illegible entries. |
| 22 | + |
| 23 | +The component also includes a fallback option to “Enter address manually,” ensuring users can provide an address if it is not available in the lookup results or if they prefer to enter it directly. This dual approach balances efficiency with inclusivity. |
| 24 | + |
| 25 | +The design is based on established patterns such as the Royal Mail’s address lookup service. Visual examples show the step-by-step interaction: entering partial information, selecting a suggested address, and displaying the completed address in the field. |
| 26 | + |
| 27 | +No accessibility testing has yet been carried out on the component, and the API provider for the address lookup has not been chosen. These will be explored before moving into private beta. |
| 28 | + |
| 29 | +### How the component is currently used |
| 30 | + |
| 31 | +The component has been used in the manage applications project during its alpha phase. It is applied when staff enter addresses of PIN contacts into the digital system, replacing the previous paper-based method. Staff input application details into a DPS interface, and the address lookup makes this process faster and less error-prone. |
| 32 | + |
| 33 | +The feature has been well received because staff often deal with applications where prisoners do not know a full address, or the address is handwritten and difficult to read. The lookup helps staff identify and complete addresses more reliably, reducing mistakes caused by missing or illegible details. |
| 34 | + |
| 35 | +This use demonstrates how the component can support digitisation of manual, paper-based services. It is especially useful where speed, accuracy, and reliability of address entry are important. The manual entry option remains available for flexibility when an address cannot be found through the lookup service. |
| 36 | + |
| 37 | +### Contribute to this component |
| 38 | +You can help develop this component by adding information to the [Address lookup Github discussion]({{ githuburl }}). This helps other people to use it in their service. |
| 39 | + |
| 40 | +{% endtab %} |
| 41 | + |
| 42 | +{% tab "Designs" %} |
| 43 | + |
| 44 | +## Designs |
| 45 | + |
| 46 | +A Figma design was not included when this component was added. |
| 47 | + |
| 48 | + There may be more information in the [Address lookup Github discussion]({{ githuburl }}). You can also view the component image in the overview. |
| 49 | + |
| 50 | +## Contribute a Figma link |
| 51 | + |
| 52 | + If you have a Figma link for this component (or a component like it) you can add it to [Github discussion]({{ githuburl }}). This helps other people to use it in their service. |
| 53 | + |
| 54 | +{% endtab %} |
| 55 | + |
| 56 | +{% tab "Accessibility" %} |
| 57 | + |
| 58 | +## Accessibility |
| 59 | + |
| 60 | +No accessibility findings were included when this component was added. There may be more information in the [Address lookup Github discussion]({{ githuburl }}). |
| 61 | +## Contribute accessibility findings |
| 62 | + |
| 63 | + If you have accessibility findings that are relevant to this component you can add them to the [Github discussion]({{ githuburl }}). This helps other people to use it in their service. |
| 64 | + |
| 65 | +{% endtab %} |
| 66 | + |
| 67 | +{% tab "Code" %} |
| 68 | + |
| 69 | +## Code |
| 70 | + |
| 71 | +No code was included when this contribution was added. |
| 72 | + |
| 73 | +You can use the [Address lookup Github discussion]({{ githuburl }}) to: |
| 74 | + |
| 75 | +* view other code blocks |
| 76 | +* add relevant code |
| 77 | + |
| 78 | +{% endtab %} |
| 79 | + |
| 80 | +{% endtabs %} |
0 commit comments