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 only be used as a child of the <ns-form > form> element.

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'
}

Last updated: Mar 27, 2024