Formatted Address
The Avonni Formatted Address component automatically formats addresses, validates input, and displays the location on a map.
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.
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.
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.
Customizes the border.
Color: Border color.
Size: Border thickness.
Style: Border style (solid, dashed, dotted, etc.).
Radius: Corner rounding of the border.
Sets the background.
Color: Background color.
Linear Gradient: Background gradient.
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.).
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.).
Last updated
Was this helpful?