> 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

The Avonni Formatted Address component automatically formats addresses, validates input, and displays the location on a map.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-1dddce6fe46908e64ddd2656c09a01b8df77d73c%2Fimage%20(64).avif?alt=media" 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. Set it to read-only to display the address as plain text, or leave it interactive so the formatted address remains clickable. 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** — label for the component.

**Help Text** — help text for the component. Requires **Label**.

**Variant** — changes the position of the component and label: Standard, Label Hidden, Label Inline, Label Stacked, or Label Spread. Requires **Label**.

**Street** — the street detail for the address.

**City** — the city detail for the address.

**Province** — the province detail for the address.

**Postal Code** — the postal code detail for the address.

**Country** — the country detail for the address.

**Latitude** — the latitude of the location if known. Latitude values must be within -90 and 90. Used for faster map rendering.

**Longitude** — the longitude of the location if known. Longitude values must be within -180 and 180. Used for faster map rendering.

**Locale** — the locale of the address. The default value is `en-US`.

**Read Only** — if present, the address is displayed as plain text and cannot be clicked or focused on.

**Show Static Map** — displays a static map of the location using Google Maps.

## 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 %}


---

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