Address selector

Overview

Address selector is used to search a specific address, add / edit a new address.

✨ This is an auto-generated AI summary of the nsx-address-selector's documentation. It may not be accurate. ✨

Use the address selector for any of the following tasks:

Searching for a specific address by postcode
Adding or entering a new address
Amending an existing address
Selecting an address from a list of existing premises (e.g. multi-premise landlords)

Examples

Configure

Implementation

Placement

The nsx-address-selector component can be used as a child of <form> wrapped in <ns-form>.

Specification

Attributes

`selected-address`

Property: selectedAddress
Description: The value of the selected address.
Type: object

`postcode`

Property: postcode
Description: The postcode of the address selector.
Type: string
Default

`addresses`

Property: addresses
Description: The list of addresses available for the given `postcode`.
Type: Array
Default: []

`manual-form-enabled`

Property: manualFormEnabled
Description: The toggle to show manual address entry form.
Type: boolean
Default: false

`allow-manual-address`

Property: allowManualAddress
Description: The toggle to manually edit the given address.
Type: boolean
Default: false

`validation`

Property: validation
Type: never[]
Default: []

`disableNative`

Property: disableNative
Type: boolean
Default: false

`showMessage`

Property: showMessage
Type: boolean
Default: true

`name`

Property: name
Description: The name of the address selector to reference in form data.
Type: string
Default: address-selector

`value`

Property: value
Description: The value of the selected address.
Type: string
Default

`labelID`

Property: labelID
Type: string
Default

`heading`

Property: heading
Type: string
Default

`type`

Property: type
Type: string
Default: standard

Events

Name	Description
`postcode-selected`	Dispatched when the postcode is selected. It holds the postcode value.
`address-selected`	Dispatched when the address is selected. It holds the selected address.
`manual-address-click`	Dispatched when the manual address button is clicked.
`change`

Specification notes

Addresses

Each address in the addresses array should be an object consisting of the following properties: addressLine1, addressLine2, postalTown, county, postcode, label.

The label is what will be displayed in the address list UI.

Structure

{
  addressLine1: '123 Kings Road',
  addressLine2: 'Little Village',
  postalTown: 'Townsville',
  county: 'Surrey',
  postcode: 'AA12 3BB',
  label: '123 Kings Road, AA12 3BB'
}

Figma

Please note: The nsx-address-selector Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).

Last updated: Oct 28, 2024