# Formatted Address

<figure><img src="/files/cYD06ONKunt42lpYkl9z" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the properties

Configuring the Avonni Formatted Address Flow Screen Component is simple, allowing seamless integration with your Salesforce fields. Follow these steps to configure the component:

1. **Label**: Assign the desired label for the address field to provide context for users.
2. **Street**: Map the Salesforce field containing the street information to the component's Street attribute.
3. **City**: Connect the appropriate Salesforce field with the city data to the component's City attribute.
4. **Province**: Link the Salesforce field containing the province or state information to the component's Province attribute.
5. **Postal code**: Associate the Salesforce field with postal code data to the component's Postal Code attribute.
6. **Country**: Connect the Salesforce field containing the country information to the component's Country attribute.
7. **Latitude**: (Optional) Map the Salesforce field with the latitude value to the component's Latitude attribute for improved map accuracy.
8. **Longitude**: (Optional) Connect the Salesforce field with the longitude value to the component's Longitude attribute for enhanced map precision.
9. **Locale**: Set the component's locale to match your desired address formatting and language preferences.
10. **Read-only**: Enable this option if you want the address displayed without allowing users to modify the data.
11. **Display a map**: Toggle this feature to include an integrated static map showing the entered address visually.

***

## Adding interactions

Interactions define what happens when users click on an action. A list of available interactions is available [here](/flow/component-builder/interactions-panel.md).

Here are the available Actions for the Formatted Address Component:

* On **`Click`**

***

## Output Variables

The Formatted Address exposes output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Formatted Address component, and pick the output variable you need.

### Address Fields

When the component is in edit mode, these variables capture the address the user entered or modified.

| Output variable | Type          | What it returns                                                   |
| --------------- | ------------- | ----------------------------------------------------------------- |
| **Street**      | Text (String) | The street address entered by the user.                           |
| **City**        | Text (String) | The city entered by the user.                                     |
| **Province**    | Text (String) | The state or province entered by the user.                        |
| **Postal Code** | Text (String) | The postal or ZIP code entered by the user.                       |
| **Country**     | Text (String) | The country entered by the user.                                  |
| **Latitude**    | Text (String) | The latitude coordinate. Available when the address is geocoded.  |
| **Longitude**   | Text (String) | The longitude coordinate. Available when the address is geocoded. |

> **Example:** A contact update flow lets users edit their mailing address. After the screen, use the individual field outputs (**Street**, **City**, **Province**, **Postal Code**, **Country**) in an Update Records element to save each value to the corresponding field on the Contact record.

{% hint style="info" %}

#### **Edit mode vs. read-only mode**

These output variables only capture user input when the component is in edit mode (not **Read Only**). In read-only mode, the address is displayed but the values come from the input properties, not from user interaction.
{% endhint %}

***

## Specifications

### Attributes

<table><thead><tr><th width="226">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>String</td><td>The Label for the Address</td></tr><tr><td>Street</td><td>String</td><td>The Street detail for the Address</td></tr><tr><td>City</td><td>String</td><td>The City detail for the Address</td></tr><tr><td>Province</td><td>String</td><td>The Province detail for the Address</td></tr><tr><td>Postal Code</td><td>String</td><td>The Postal Code detail for the Address</td></tr><tr><td>Country</td><td>String</td><td>The Country detail for the Address</td></tr><tr><td>Latitude</td><td>String</td><td>The Latitude detail for the Address</td></tr><tr><td>Longitude</td><td>String</td><td>The Longitude detail for the Address</td></tr><tr><td>Locale</td><td>String</td><td>The Locale detail for the Address</td></tr><tr><td>Read Only</td><td>Boolean</td><td>If present, the address is displayed as plain text and cannot be clicked or focused on.</td></tr></tbody></table>

### Events

No Events are available

### Styling Hooks

#### Container

| Name             | Description                                 |
| ---------------- | ------------------------------------------- |
| Background Color | Define a background color for the container |
| Border Color     | Define a border color for the container     |
| Border Size      | Define a border size for the container      |
| Border Style     | Define a border style for the container     |
| Border Radius    | Define a border radius for the container    |

#### Address

| Name        | Description                          |
| ----------- | ------------------------------------ |
| Color       | Define a text color for the Address  |
| Font Size   | Define a font size for the Address   |
| Font Style  | Define a font style for the Address  |
| Font Weight | Define a font weight for the Address |

#### Label

| Name        | Description                             |
| ----------- | --------------------------------------- |
| Color       | Define a text color for the label text  |
| Font Size   | Define a font size for the label text   |
| Font Style  | Define a font style for the label text  |
| Font Weight | Define a font weight for the label text |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/formatted-address.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.