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.
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.
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:
Properties
Label
This text is shown above the address input to indicate what you want the user to enter.
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.
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.
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.”
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.”
Validate Logic
Control what is considered a valid address. For example, you might require that only addresses within a certain US state are accepted.
Control what is considered a valid address. For example, you might require that only addresses within a certain US state are accepted.
Details
Hint
Add a hint to guide users on how to use the address autocomplete or any specific format requirements you might have.
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.
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.
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”).
Each component has a unique ID for workflows or referencing in other areas. Modify it for clarity (e.g., “startAddress” or “destinationAddress”).
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article