Address reference

Factories

overflow.billingAddress(options?: BillingAddressElementOptions): BillingAddressElement
overflow.shippingAddress(options?: ShippingAddressElementOptions): ShippingAddressElement

Both share the same options shape.

Options

Key	Type	Default
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`id`	`string`	auto
`ariaLabel`	`string`	none
`locale`	`string`	Overflow instance locale
`required`	`boolean`	`true`
`validate`	`(value) => string \| null`	none
`addressAutocomplete`	see Address autocomplete	not enabled
`fields`	see below	`{}`

`fields`

Every atom accepts label, placeholder, disabled, autoFocus, hidden, id, and ariaLabel.

Field	Default label
`line1`	`'Address line 1'`
`line2`	`'Address line 2'`
`city`	`'City'`
`state`	`'State'`
`postalCode`	`'Postal code'`
`country`	`'Country'`

Setting fields.<atom>.hidden: true hides the atom and skips its schema during validation.

`fields.country` extras

Key	Type	Default
`supportedCountries`	`string[]` (ISO 3166-1 alpha-2)	every supported country
`defaultCountry`	`string` (ISO 3166-1 alpha-2)	inferred from shopper locale

`fields.fullName` (optional slot)

Accepts every option the standalone fullName element accepts, minus the elementType discriminant. Presence of the key opts the slot in.

`fields.companyName` (optional slot)

Accepts every option the standalone companyName element accepts, minus the elementType discriminant. Presence of the key opts the slot in.

Value

type AddressValue = {
  line1: string;
  line2?: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
  fullName?: { firstName: string; lastName: string } | null;
  companyName?: string;
};

fullName and companyName are undefined when the corresponding slot is not configured.

`FieldError.field` values

'line1', 'line2', 'city', 'state', 'postalCode', 'country', and (when configured) 'fullName' / 'firstName' / 'lastName' / 'companyName'.

Methods

element.mount(selector)
element.update(partialOptions)
element.submit()
element.unmount()
element.destroy()
element.on(event, handler)

Events

Every element event is supported. See Events overview.

Get started

Elements

Options

Events

Theming

Guides

Factories

Options

`fields`

`fields.country` extras

`fields.fullName` (optional slot)

`fields.companyName` (optional slot)

Value

`FieldError.field` values

Methods

Events

​Factories

​Options

​fields

​fields.country extras

​fields.fullName (optional slot)

​fields.companyName (optional slot)

​Value

​FieldError.field values

​Methods

​Events

Factories

Options

`fields`

`fields.country` extras

`fields.fullName` (optional slot)

`fields.companyName` (optional slot)

Value

`FieldError.field` values

Methods

Events