> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/formatted-address.md).

# Formatted Address

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

***

## Overview

The Formatted Address component renders a complete mailing address — street, city, state/province, postal code, and country — in a localized format. It can operate in edit mode (letting users enter or update an address) or read-only mode (displaying the address as plain text). An optional static map preview shows the location on a Google Map.

## Configuration

To configure it, click the component on the Flow screen. The Edit Formatted Address Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

### Properties

**Label** — text displayed above the address field to provide context for users.

**Field Hint Text** — help text shown beneath the component (requires a label to be set).

**Variant** — controls how the label is positioned relative to the address field: Standard, Label Hidden, Label Inline, Label Stacked, or Label Spread.

**Street** — map the Salesforce field containing street information.

**City** — map the Salesforce field containing city data.

**Province** — map the Salesforce field containing state or province information.

**Postal Code** — map the Salesforce field containing postal code data.

**Country** — map the Salesforce field containing country information.

**Latitude** — optional. Map the latitude coordinate (-90 to 90) for faster map rendering.

**Longitude** — optional. Map the longitude coordinate (-180 to 180) for faster map rendering.

**Locale** — sets the locale used to format the address (e.g., `en-US`). Affects address layout and ordering conventions.

**Read Only** — when enabled, the address is displayed as plain text and cannot be edited by the user.

**Display a Map** — when enabled, a static Google Map of the entered address is shown below the address fields.

{% hint style="info" %}
**Edit mode vs. read-only mode**

The output variables (Street, City, Province, Postal Code, Country, Latitude, Longitude) only capture user input when the component is in edit mode. In read-only mode, the address is displayed but the values come from the input properties, not from user interaction.
{% endhint %}

## Interactions

Interactions define what happens when users click on the component. Configure them from the **Interactions** panel — see the full [list of actions](/flow/component-builder/interactions-panel.md).

* **On Click**

## Styling

The **Style** tab gives you fine-grained control over the Formatted Address's appearance. Configure it from the **Style** tab of the Edit Formatted Address panel.

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing.

* **Top:** Space above the component.
* **Right:** Space to the right of the component.
* **Bottom:** Space below the component.
* **Left:** Space to the left of the component.
  {% endtab %}

{% tab title="Padding" %}
Controls inner spacing.

* **Top:** Inner space above the content.
* **Right:** Inner space to the right of the content.
* **Bottom:** Inner space below the content.
* **Left:** Inner space to the left of the content.
  {% endtab %}

{% tab title="Border" %}
Customizes the border.

* **Color:** Border color.
* **Size:** Border thickness.
* **Style:** Border style (solid, dashed, dotted, etc.).
* **Radius:** Corner rounding of the border.
  {% endtab %}

{% tab title="Background" %}
Sets the background.

* **Color:** Background color.
* **Linear Gradient:** Background gradient.
  {% endtab %}

{% tab title="Label" %}
Styles the label displayed above the address field.

* **Color:** Label text color.
* **Font Size:** Label text size.
* **Font Style:** Label text style (normal, italic).
* **Font Weight:** Label text weight (normal, bold, etc.).
  {% endtab %}

{% tab title="Address" %}
Styles the address text displayed in read-only mode.

* **Color:** Address text color.
* **Font Size:** Address text size.
* **Font Style:** Address text style (normal, italic).
* **Font Weight:** Address text weight (normal, bold, etc.).
  {% endtab %}
  {% endtabs %}

## 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.