lightning:inputAddress

Represents an address compound field. This component requires API version 42.0 and later.

A lightning:inputAddress component is an address compound field represented by HTML input elements of type text. The country and province fields can be an input field or a dropdown menu. An input field is displayed if countryOptions and provinceOptions are not provided.

This example creates an address compound field with a field for the street, city, province, postal code, and country.

<aura:component>
    <div style="max-width: 400px;">
        <lightning:inputAddress
            aura:id="myaddress"
            addressLabel="Address"
            streetLabel="Street"
            cityLabel="City"
            countryLabel="Country"
            provinceLabel="State"
            postalCodeLabel="PostalCode"
            street="1 Market St."
            city="San Francisco"
            country="US"
            province="CA"
            postalCode="94105"
            required="true"
        />
    </div>
</aura:component>

To create a dropdown menu for the country and province, pass in an array of label-value pairs to countryOptions and provinceOptions. The country and province values are used as the default values on the dropdown menus.

<aura:component>
    <aura:attribute name="provinceOptions" type="List" default="[
        {'label': 'California', 'value': 'CA'},
        {'label': 'Texas', 'value': 'TX'},
        {'label': 'Washington', 'value': 'WA'},
    ]"/>
    <aura:attribute name="countryOptions" type="List" default="[
        {'label': 'United States', 'value': 'US'},
        {'label': 'Japan', 'value': 'JP'},
        {'label': 'China', 'value': 'CN'},
    ]"/>
    <div style="max-width: 400px;">
        <lightning:inputAddress
            aura:id="myaddress"
            addressLabel="Address"
            streetLabel="Street"
            cityLabel="City"
            countryLabel="Country"
            provinceLabel="Province/State"
            postalCodeLabel="PostalCode"
            street="1 Market St."
            city="San Francisco"
            country="US"
            countryOptions="{! v.countryOptions }"
            provinceOptions="{! v.provinceOptions }"
            postalCode="94105"
            required="true"
        />
    </div>
</aura:component>

Alternatively, you can enable state and country picklists in your org, and access the values through an Apex controller. For more information, see Let Users Select State and Country from Picklists in Salesforce Help.

Usage Considerations

When you set required="true", a red asterisk is displayed on every address field to indicate that they are required. An error message is displayed below a field if a user interacted with it and left it blank. The required attribute is not enforced and you must validate it before submitting a form that contains an address compound field.

Let's say you have a lightning:button component that calls the handleClick controller action. You can display the error message when a user clicks the button without providing a value on a field.

({
    handleClick: function (cmp, event) {
        var address = cmp.find("myaddress");
        var isValid = address.checkValidity();
        if(isValid) {
            alert("Creating new address");
        }
        else {
            address.showHelpMessageIfInvalid();
        }
    }
})

Attributes

Attribute Name Attribute Type Description Required?
addressLabel String The label of the address compound field.
body Component[] The body of the component. In markup, this is everything in the body of the tag.
city String The city field of the address.
cityLabel String The label of the city field of the address.
class String A CSS class for the outer element, in addition to the component's base classes.
country String The country field of the address. If countryOptions is provided, this country value is selected by default.
countryLabel String The label of the country field of the address.
countryOptions List The array of label-value pairs for the country. Displays a dropdown menu of options.
disabled Boolean Specifies whether the address fields are disabled. This value defaults to false.
onblur Action The action triggered when the input releases focus.
onchange Action The action triggered when the value changes.
onfocus Action The action triggered when the input receives focus.
postalCode String The postal code field of the address.
postalCodeLabel String The label of the postal code field of the address.
province String The province field of the address. If provinceOptions is provided, this province value is selected by default.
provinceLabel String The label of the province field of the address.
provinceOptions List The array of label-value pairs for the province. Displays a dropdown menu of options.
readonly Boolean Specifies whether the address fields are read-only. This value defaults to false.
required Boolean Specifies whether the address fields are required. This value defaults to false.
street String The street field of the address.
streetLabel String The label of the street field of the address.
title String Displays tooltip text when the mouse moves over the element.
variant String The variant changes the appearance of the compound field. Accepted variants include standard and label-hidden. This value defaults to standard.