# Merge Address into a Single Field

Instead of writing each address attributes to individual fields, you may exercise fine control about how address data is presented using the [`onAddressRetrieved`](https://address-finder.ideal-postcodes.co.uk/interfaces/controller.controlleroptions.html#onaddressretrieved) callback.

In this example, we merge the addresses and insert it to a `textarea`.

Loading...

```
<form>
<label for="input">Search Your Address</label>
<input type="text" id="input" placeholder="Start typing address here" />
<label for="output_field">Address</label>
<textarea id="output_field" rows="5"></textarea>
</form>
```

```

import { AddressLookup } from "@addresszen/address-lookup";

AddressLookup.setup({
  apiKey: "ak_test",
  inputField: "#input",
  onAddressRetrieved: (address) => {
    const result = [
      address.line_1,
      address.line_2,
      address.city,
      address.state,
      address.zip_plus_4_code,
    ]
      .filter((elem) => elem !== "")
      .join("\n");
    document.getElementById("output_field").textContent = result;
  },
});
```

```

textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea:focus {
  outline: none;
  border-color: #2933e6;
  box-shadow: 0 0 0 3px rgba(41, 51, 230, 0.15);
}
[data-theme="dark"] textarea {
  background-color: #2a2a2a;
  border-color: #444950;
  color: #e5e7eb;
}
[data-theme="dark"] textarea:focus {
  border-color: #545ceb;
  box-shadow: 0 0 0 3px rgba(84, 92, 235, 0.25);
}
```