Overview
Enhance your forms with a lightweight address autocomplete powered by Mapbox. Choose String Mode for minimal setup or Object Mode for full control and custom layouts.
Getting Started
1. Get a Mapbox Token
Visit the Mapbox developer dashboard, create or log into your
account, and generate an API token. Paste this token into the
mapbox_token field under the Plugin Settings tab in
Bubble.
2. Add the Autofill Element
Drag the non-visual Autofill element onto your page. You can size it small (e.g., 20×20 pixels) and hide it if needed — it just needs to exist.
3. Create an Address Input
Add an Input where users can type their address. Link this Input
to the Autofill element's Address Input field.
4. Build a GroupFocus Dropdown
Create a GroupFocus element to act as a
dropdown below the input. Place a
RepeatingGroup inside and set its Data Source
to either suggestions or
suggestion_objects.
5. Handle Selections
Create a Workflow triggered when a RepeatingGroup item is
clicked. Set a custom state (e.g.,
selected_address_index) and connect it to the Autofill
element’s Selected Index field.
Need a real-world example? Check out the Example Usage section to see a complete setup.
Plugin Settings
Mapbox Token
(text) Your Mapbox API token for authenticating requests (e.g.,
pk.eyJ1...).
Because this lives in the browser, limit token usage to your domain in the Mapbox developer dashboard.
Input Fields
Address Input
(text) The text the user types to trigger suggestions.
Selected Index
(number) The index of the selected suggestion, e.g. from a repeating group.
Proximity
(text) Bias results toward the IP address of the user.
Country
(text) Restrict suggestions to an ISO country code.
Suggestion Format
(text) Choose which address components to use and in which order when displaying suggestions.
{address_line1}, {place}, {region_code}
Applies only to String Mode.
Min. Chars
(number) The minimum number of characters the user must type before a search will be performed.
Max Results
(number) Max suggestions to return. Up to 10 at a time.
App Type
Set to the Plugin Type API Call (Autofill) to
enable the suggestion_objects state.
Applies only to Object Mode.
Exposed States
suggestions
List<text> of formatted suggestion labels. Use this output to get started quickly.
suggestion_objects
List<Address> each containing every address component. Use this output for more control over how suggestions are displayed.
selected_address_lat
Latitude of the selected address.
selected_address_lng
Longitude of the selected address.
address_line1
Primary address component of selected address.
address_line2
Secondary address component (unit, suite) of selected address.
place
City or locality component of selected address.
district
District or county component of selected address.
district_code
Code for district or county of selected address.
postcode
Postal code component (e.g., “90210”) of selected address.
region
State or province component of selected address.
region_code
Code for state or province of selected address.
country
Full country name component of selected address.
country_code
ISO country code component of selected address.
Address Components
address_line1
Primary street address (e.g., “123 Main St”).
address_line2
Secondary address info (e.g., “Apt 4B”).
place
City or locality name.
district
District or county (e.g., “Kings County”).
district_code
Code representing the district.
postcode
Postal code component (e.g., “90210”).
region
State or province name.
region_code
Code of state or province (e.g., “CA”).
country
Full country name.
country_code
ISO country code (e.g., “US”).
Live Demo
Example Usage
Explore a working Bubble app where the Address Autocomplete plugin is configured and used inside a real form. This can help you learn how to integrate the plugin into your own apps.
Support
Need help or have questions? Feel free to reach out to zach@zsoftservices.com.