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 ConsiderationsWhen 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(); } } })
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. |