Overview

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

Summarise it!

✨ 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

Standard

Configure

Allow manual address

Configure

Single address

Configure

Multiple addresses

Configure

Many addresses

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

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).