How do I use the Address Component?

Modified on Mon, 2 Mar at 7:25 AM

The Address component in Droplet is a specialized field that integrates with Google Maps to autofill addresses with a typeahead search. Instead of asking your users for separate Street, City, State, and ZIP fields, you can give them one streamlined component that instantly suggests matching addresses. This not only speeds up data entry, but also reduces errors by ensuring addresses are spelled and formatted correctly.

Example Address Component

An all-in-one way to capture valid addresses using Google Maps autofill.

When should I use an Address component?

The Address component is ideal whenever you need accurate address data in your form. By automatically suggesting and validating addresses, it eliminates the need for multiple text fields and saves users time. Here are some common scenarios:

Internal School & District Forms
Allows staff or families to quickly enter a precise address without worrying about spelling errors or missing details.

Mileage & Distance Calculations
Used with the Measure Distance component, you can automatically compute the shortest driving distance between two Address fields for mileage reimbursements, field trip requests, or transportation forms.

Features & Configuration

To add an Address component to your form, click on the Address field in your component library and drag it onto the canvas. The right-hand panel lets you configure its properties:

You can also add Address and Distance components into Tables. Once you've added a Table, click into a Column and assign the input setting type to Address. This will be your Start Address. Then do the same for a second column, your End Address.

Lastly, click into a third column and assign the input setting type to Distance. Make sure to assign the Start Address Field and End Address Field to match the columns you created.

Properties

Label
This text is shown above the address input to indicate what you want the user to enter.

Width
Specify how wide the component should span (1-12 columns) to fit your form layout.

Required
Make the address field mandatory if you need to ensure every submission has a valid address. If the field is visible, the user must enter a recognized address.

Logic

Display Logic
Decide when the Address component appears based on other fields. For example, you can show it only if someone selects “Yes, I need to provide my location.”

Details

Hint
Add a hint to guide users on how to use the address autocomplete or any specific format requirements you might have.

Tooltip
Provide additional context or tips in a hover-over tooltip next to the Address label.

Name
Change the Name field to make it easier to identify in CSV exports, especially if you have multiple addresses in your form.

ID
Each component has a unique ID for workflows or referencing in other areas. Modify it for clarity (e.g., “startAddress” or “destinationAddress”).