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 \| MultiFieldRequired`	`false`
`validate`	`(value) => string \| null`	none
`addressAutocomplete`	see Address autocomplete	not enabled
`defaultCountry`	`string` (ISO 3166-1 alpha-2)	none — unset renders the country placeholder
`fieldLayout`	`AddressFieldLayout`	provider default (see below)
`fields`	see below	`{}`

`required` shape

required accepts a boolean shortcut or a per-atom object:

type MultiFieldRequired = {
  line1?: boolean;
  line2?: boolean;
  city?: boolean;
  state?: boolean;
  zip?: boolean;
  country?: boolean;
  fullName?: boolean;
  companyName?: boolean;
};

true marks every rendered atom required; false leaves them all optional. Pass an object to require specific atoms only.

`fieldLayout` shape

fieldLayout is an array of atom keys (or { inlineRow: [...] } wrappers) that defines vertical order. It mirrors the card fieldLayout shape:

type AddressFieldKey =
  | 'fullName'
  | 'companyName'
  | 'line1'
  | 'line2'
  | 'city'
  | 'state'
  | 'zip'
  | 'country';

type AddressFieldLayout = Array<AddressFieldKey | { inlineRow: AddressFieldKey[] }>;

`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'`
`zip`	`'ZIP / 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 is a top-level option, not nested under fields.country.

`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;
  zip: 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', 'zip', 'country', and (when configured) 'fullName' / 'firstName' / 'lastName' / 'companyName'.

Methods

element.mount(selector)
element.update(partialOptions)
element.submit(): void — validates and emits onSubmit / onError.
element.unmount()
element.destroy()
element.on(event, handler) — subscribe to events.

Events

Every element event is supported. See Events overview.

Get started

Elements

Options

Events

Theming

Guides

Factories

Options

`required` shape

`fieldLayout` shape

`fields`

`fields.country` extras

`fields.fullName` (optional slot)

`fields.companyName` (optional slot)

Value

`FieldError.field` values

Methods

Events

​Factories

​Options

​required shape

​fieldLayout shape

​fields

​fields.country extras

​fields.fullName (optional slot)

​fields.companyName (optional slot)

​Value

​FieldError.field values

​Methods

​Events

Factories

Options

`required` shape

`fieldLayout` shape

`fields`

`fields.country` extras

`fields.fullName` (optional slot)

`fields.companyName` (optional slot)

Value

`FieldError.field` values

Methods

Events