@navinc/base-react-components/src/form-elements/address-input.readme.md

Nav's Pattern Library

Use the `<AddressInput />` component when full address information is needed.
The AddressInput component is a fully uncontrolled component. Nav uses Google
Maps Autocomplete api to autocomplete and validate addresses. It accepts an
`onAddressSelected` function as a prop which is called once a complete addressed
is selected from the Google Maps dropdown list. The `onAddressSelected`
function is passed a structured address with the following fields: `street1`,
`city`, `state`, `zip`.

#### Usage:

```
<AddressInput
  onAddressSelected={({ street1, city, state, zip }) => console.log({ street1, city, state, zip })}
  label='Address'
/>
```

#### Props

AddressInput accepts all the props the Input component accepts -- including
`onChange` -- with the exception of `value` -- use `defaultValue` to populate
with an existing value at mount time -- and `type` -- the type is internally
assigned the value of `text` to not interfere with the Autocomplete functionality
-- and with the following additions.

##### onAddressSelected

The GoogleMaps Autocomplete API binds to an input element and provides a
dropdown of autocompleted addresses to choose from. When the user clicks on one
of these, the input's value is updated to reflect the address string and the
AddressInput component calls `onAddressSelected` passing it an object of address parts:

```
{
  street1: String,
  city: String,
  state: String,
  zip: String
}
```