Module: Address

Renders an address component.

Parameters:

Name	Type	Attributes	Default	Description
`children`	React.ReactNode \| Array.<React.ReactNode>	<optional>		React element children
`customAttributes`	Record.<string, any>	<optional>		Custom attributes for the component
`customClasses`	string \| Array.<string> \| Record.<string, boolean>	<optional>		Custom classes for the component
`countryDropdownAttributes`	Record.<string, any>	<optional>		Attributes for the country dropdown
`countryDropdownClasses`	string \| Array.<string> \| Record.<string, boolean>	<optional>		Classes for the country dropdown
`defaultData`	Record.<string, any>	<optional>		Default data for the component state
`disabledFields`	Array.<string>	<optional>		Fields to disable in the component. Use the state keys: lineOne, lineTwo, city, state, postalCode, country
`initialData`	Record.<string, any>	<optional>		Initial data for the component state
`i18n`	Record.<string, any>	<optional>		Internationalization settings
`onChange`	function	<optional>		Callback for when the component changes, returns the state
`layout`	Array.<object>	<optional>		Custom layout for the address fields. Each object should have a 'key' (string: 'lineOne', 'lineTwo', 'city', 'state', 'postalCode', 'country') and an optional 'width' (string: 'full' or 'half'). Defaults to a standard layout if not provided or invalid.
`parseRegionCodes`	boolean	<optional>		Whether to parse region codes for the component
`preferredRegions`	Record.<string, any>	<optional>		Preferred regions for the component: countries, usStates, caProvinces
`regionCodes`	Record.<string, any>	<optional>		Region codes for the component
`spacing`	string \| number \| Array.<string> \| Record.<string, any>	<optional>	''	The spacing for the component
`stateDropdownAttributes`	Record.<string, any>	<optional>		Attributes for the state/province dropdown
`stateDropdownClasses`	string \| Array.<string> \| Record.<string, boolean>	<optional>		Classes for the state/province dropdown
`useSelectPlaceholders`	boolean	<optional>		Whether to use select placeholders for the dropdowns
`ref`	React.RefObject.<HTMLElement> \| null			Ref to the component

Since: 5.5.0
Source: modules/Address/index.js, line 66

Returns:

The Address component.

Type:: JSX.Element

Example

import Address from '@gravityforms/components/react/admin/modules/Address';

// Basic usage with all fields
<Address
  regionCodes={{
    countries: [{ value: 'US', label: 'United States' }, { value: 'CA', label: 'Canada' }],
    usStates: [{ value: 'CA', label: 'California' }, { value: 'NY', label: 'New York' }],
    caProvinces: [{ value: 'ON', label: 'Ontario' }, { value: 'QC', label: 'Quebec' }]
  }}
  onChange={(data) => console.log(data)}
/>

// With preferred regions and initial data
<Address
  regionCodes={{
    countries: [{ value: 'US', label: 'United States' }, { value: 'CA', label: 'Canada' }],
    usStates: [{ value: 'CA', label: 'California' }, { value: 'NY', label: 'New York' }],
    caProvinces: [{ value: 'ON', label: 'Ontario' }, { value: 'QC', label: 'Quebec' }]
  }}
  preferredRegions={{
    countries: ['CA', 'US'],
    usStates: ['NY'],
    caProvinces: ['QC']
  }}
  initialData={{
    country: 'US',
    state: 'CA',
    city: 'San Francisco'
  }}
/>

// With disabled fields
<Address
  regionCodes={{
    countries: [{ value: 'US', label: 'United States' }, { value: 'CA', label: 'Canada' }]
  }}
  disabledFields={['lineTwo', 'state']}
  initialData={{ country: 'US' }}
/>

// With custom classes and spacing
<Address
  regionCodes={{
    countries: [{ value: 'US', label: 'United States' }]
  }}
  customClasses={['custom-address-class']}
  spacing={4}
  customAttributes={{ 'data-test': 'address-component' }}
>
  <div>Additional content</div>
</Address>

// With custom layout (e.g., country first, city and postal code on the same line)
<Address
  regionCodes={{
    countries: [{ value: 'US', label: 'United States' }, { value: 'CA', label: 'Canada' }],
    usStates: [{ value: 'CA', label: 'California' }, { value: 'NY', label: 'New York' }],
  }}
  layout={[
    { key: 'country', width: 'full' },
    { key: 'lineOne', width: 'full' },
    { key: 'lineTwo', width: 'full' },
    { key: 'city', width: 'half' },
    { key: 'postalCode', width: 'half' },
    { key: 'state', width: 'full' }, // Example: State takes full width on its own row
  ]}
  onChange={(data) => console.log(data)}
/>