---
metaTitle: Address component | AwesCode UI
meta:
  - name: description
    content: The <AwAddress /> component is used to render Address - UI Vue component for AwesCode UI.
title: Address
---

# AwAddress

**Category:** Organism | **Import:** Dynamic

The `AwAddress` component is an address input field that integrates with Google Places Autocomplete API. It provides address suggestions as you type and returns detailed address information when selected.

## Overview

`AwAddress` provides an address input solution with:
- Google Places Autocomplete integration
- Real-time address suggestions
- Detailed address data retrieval
- Timezone information (optional)
- Formatted address output
- Google Maps branding

## Usage

### Basic Example

```markup
<AwAddress v-model="address" />
```

### With Query Options

```markup
<AwAddress 
    v-model="address"
    :query-options="{
        types: ['address'],
        componentRestrictions: { country: 'us' }
    }"
/>
```

### With Timezone

```markup
<AwAddress 
    v-model="address"
    timezone
/>
```

### With Label

```markup
<AwAddress 
    v-model="address"
    label="Enter Address"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Selected address object | `Object` | `false` | `null` |
| queryOptions | Google Places Autocomplete options | `Object` | `false` | `null` |
| timezone | Fetch timezone information | `Boolean` | `false` | `false` |
| label | Input label | `String` | `false` | `''` |
| gmKey | Google Maps API key | `String` | `true` | - |
| gmLanguage | Language of the suggestions dropdown (also used to load the Maps script) | `String` | `false` | `''` |
| detailsLanguage | Language Google returns `address_components` in (city, street, country name). Use the company language so the saved address does not depend on the UI language or the typed query | `String` | `false` | `''` |

**Query Options:**
See [Google Places Autocomplete Options](https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete) for all available options.

**Common Options:**
```javascript
{
  types: ['address'],                    // Restrict to addresses
  componentRestrictions: { country: 'us' }, // Restrict to country
  bounds: LatLngBounds,                  // Bias results to area
  // ... more options
}
```

### Slots

This component uses `AwSelectObject` slots internally. All `AwSelectObject` slots are available.

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `Object` | Emitted when address is selected (formatted address object) |

**Address Object Format:**
```javascript
{
  place_id: 'ChIJ...',
  formatted_address: '123 Main St, City, State 12345',
  address_components: [...],
  geometry: { location: {...}, viewport: {...} },
  timezone: 'America/New_York',  // If timezone prop is true
  // ... more Google Places details
}
```

### Mixins

- `googleMaps` - Provides Google Maps API initialization

## Related Components

- `AwSelectObject` - Select component used internally
- `AwInput` - Input component (used by AwSelectObject)

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Requires Google Maps JavaScript API with Places library
- Google Maps API key must be configured in project
- Component automatically initializes Google Maps if not already loaded
- Uses Google Places Autocomplete Service for suggestions
- Uses Google Places Service for detailed address retrieval
- Session tokens are used for billing optimization
- Address types are filtered (removes political, intersection, sublocality types)
- Google branding is automatically displayed
- Timezone requires additional API call (may incur extra cost)
- Component handles Google Maps script loading and initialization
- Search is debounced and handled by `AwSelectObject`
- Selected address triggers Places API details request