Tutorial: Address Input
Form Preview

What You'll Build

Professional forms with location-aware features using Google Places autocomplete. Perfect for service businesses that need to verify service areas, calculate travel fees, or collect accurate customer addresses.

What You'll Learn

  • Adding address input with Google Places autocomplete
  • Restricting suggestions to specific countries
  • Calculating distance from your business location
  • Validating service area boundaries (max distance)
  • Creating distance-based pricing tiers
  • Displaying interactive maps with markers
  • Building a complete service quote calculator
💼

Perfect For Service Businesses

The Address Input control is ideal for:

  • Cleaning services: Verify if a customer is within your service area
  • Lawn care & landscaping: Calculate travel fees based on distance
  • Photography: Book on-location sessions with distance pricing
  • Delivery services: Validate delivery zones automatically
⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Basic Address Input

Add a simple address input with Google Places autocomplete. Users start typing and see address suggestions appear automatically.

💡 Tip:
Use addAddress() to add an address field. The autocomplete powered by Google Places API provides accurate, real-world addresses with coordinates.

Step 2: Country Restrictions

Limit address suggestions to specific countries. This is useful when you only serve certain regions.

💡 Tip:
Use restrictToCountries with ISO 3166-1 alpha-2 country codes. For example: 'US' (United States), 'GB' (United Kingdom), 'CA' (Canada), 'DE' (Germany).

Step 3: Distance Calculation

Calculate the distance from your business location to the customer's address. Essential for service area verification and travel fee calculations.

💡 Tip:
Set referenceAddress to your business location and showDistance: true to display the distance. Access the distance programmatically with address('id')?.distance().

Step 4: Service Area Validation (maxDistance)

Automatically validate that customers are within your service area. The form will show an error if the address is too far from your location.

💡 Tip:
Use maxDistance to set your service radius. Check address('id')?.isWithinRange() to conditionally show content based on whether the customer is in your service area.

Step 5: Distance-Based Pricing Tiers

Create pricing tiers based on distance. This lawn care example charges a travel fee for customers farther away.

💡 Tip:
Use distance() to implement tiered pricing logic. Common pattern: free delivery within X miles, fee for X-Y miles, no service beyond Y miles.

Step 6: Interactive Map Display

Show an interactive map with markers for both the reference location and the selected address. A line connects them, colored green or red based on distance.

💡 Tip:
Enable showMap: true to display an interactive Leaflet map below the address input. The map automatically zooms to show both locations when an address is selected.

Step 7: Complete Service Area Calculator

Build a complete house cleaning quote calculator that combines address validation with pricing based on square footage, frequency, and travel distance.

💡 Tip:
This example demonstrates a real-world use case: a cleaning service with distance-based travel fees and recurring service discounts. The quote only appears when the customer is within the service area.

Step 8: Accessing Address Data

Learn how to access all the data returned by the address selection: full address, coordinates, country, and Google Place ID.

💡 Tip:
The AddressValue type includes: formattedAddress, coordinates (lat/lng), country, countryCode, and placeId. Use these for CRM integration, analytics, or custom logic.

AddressConfig Reference

PropertyTypeDescription
placeholderstringPlaceholder text for the input
restrictToCountriesstring[]ISO 3166-1 alpha-2 country codes (e.g., ['US', 'CA'])
showMapbooleanDisplay interactive map with markers (default: false)
showDistancebooleanShow distance badge from reference (default: false)
referenceAddressAddressValueReference point for distance calculation (your business location)
maxDistancenumberMaximum allowed distance from reference (validation)
distanceUnit'km' | 'miles'Unit for distance display and calculation (default: 'km')

Runtime Methods

MethodReturnsDescription
value()AddressValue | nullCurrent address value with all details
distance()number | nullDistance from reference in configured unit
isWithinRange()booleanWhether address is within maxDistance

Try It Yourself

  • Challenge 1: Create a delivery zone checker with 3 pricing tiers based on distance (0-5 mi: free, 5-10 mi: $5, 10-15 mi: $10)
  • Challenge 2: Build a pet sitting form that calculates travel time (assume 30 mph average speed)
  • Challenge 3: Add multiple service addresses to the cleaning quote (primary + additional locations)

Next Steps

You've mastered address input with distance-based features! This is powerful for service businesses that need to verify coverage areas and calculate pricing.

Continue to Computed Values Tutorial

Other learning paths: