Skip to main content

​
Overview

The location element provides a Google Places search interface for users to select a location. It stores the full place data including coordinates, name, address, and optional metadata like ratings and photos.
ElementBest ForValue Type
locationStore addresses, venues, POIsPlaceValue

​
Properties

PropertyTypeDescription
idstringUnique identifier (becomes prop name)
inputType'location'Must be 'location'
titlestringField title
descriptionstringHelp text
placeholderstringSearch input placeholder text
defaultValuePlaceValueInitial selected location
validationobjectValidation rules

​
Validation

RuleTypeDescription
requiredbooleanA location must be selected

​
PlaceValue Structure

The selected location value has this structure: 
interface PlaceValue {
  placeId: string        // Google Places ID
  name: string           // Place name
  address: string        // Formatted address
  lat: number            // Latitude
  lng: number            // Longitude
  photos?: string[]      // Photo URLs (optional)
  rating?: number        // Place rating 1-5 (optional)
  userRatingsTotal?: number // Number of reviews (optional)
  types?: string[]       // Place types (optional)
  website?: string       // Website URL (optional)
  phoneNumber?: string   // Phone number (optional)
}

​
Example

​
Basic Location

linkapp.config.ts
{
  id: "storeLocation",
  inputType: "location",
  title: "Store Location",
  description: "Select your store location",
  validation: {
    required: true
  }
}

​
With Custom Placeholder

linkapp.config.ts
{
  id: "venue",
  inputType: "location",
  title: "Event Venue",
  description: "Search for the venue",
  placeholder: "Search for a venue...",
  validation: {
    required: true
  }
}

​
Usage in Layout

app/expanded.tsx
import type { AppProps, PlaceValue } from "@linktr.ee/linkapp/types"

type Settings = {
  storeLocation: PlaceValue
}

export default function ClassicLayout({ storeLocation }: AppProps<Settings>) {
  return (
    <div className="p-4">
      <h2 className="text-xl font-bold">{storeLocation.name}</h2>
      <p className="text-gray-600">{storeLocation.address}</p>

      {storeLocation.rating && (
        <p className="text-sm text-yellow-600">
          Rating: {storeLocation.rating}/5 ({storeLocation.userRatingsTotal} reviews)
        </p>
      )}

      <a
        href={`https://www.google.com/maps/place/?q=place_id:${storeLocation.placeId}`}
        target="_blank"
        rel="noopener noreferrer"
        className="text-blue-600 hover:underline"
      >
        View on Google Maps
      </a>
    </div>
  )
}

​
Using with Arrays

Location elements work inside arrays for collecting multiple locations:
linkapp.config.ts
{
  id: "locations",
  inputType: "array",
  title: "Store Locations",
  description: "Add your store locations",
  array_options: {
    min: 1,
    max: 10,
    add_item_button_text: "Add location",
    add_second_item_button_text: "Add another location",
    edit_item_title: "Edit location",
    add_item_title: "Add location",
    item_format: "{{name}}"
  },
  array_elements: [
    {
      id: "name",
      inputType: "text",
      title: "Location Name",
      placeholder: "e.g., Downtown Store",
      validation: { required: true, maxLength: 50 }
    },
    {
      id: "place",
      inputType: "location",
      title: "Address",
      description: "Search for the store address",
      validation: { required: true }
    }
  ]
}
Usage in Layout:
app/expanded.tsx
import type { AppProps, PlaceValue } from "@linktr.ee/linkapp/types"

type StoreLocation = {
  name: string
  place: PlaceValue
}

type Settings = {
  locations: StoreLocation[]
}

export default function ClassicLayout({ locations }: AppProps<Settings>) {
  return (
    <div className="space-y-4">
      {locations.map((location, index) => (
        <div key={index} className="p-4 border rounded-lg">
          <h3 className="font-bold">{location.name}</h3>
          <p className="text-gray-600">{location.place.address}</p>
          {location.place.rating && (
            <span className="text-sm text-yellow-600">
              Rating: {location.place.rating}/5
            </span>
          )}
        </div>
      ))}
    </div>
  )
}

​
Common Patterns

Business location: 
{
  id: "businessAddress",
  inputType: "location",
  title: "Business Address",
  description: "Your business location for customers to find you",
  placeholder: "Search for your business...",
  validation: { required: true }
}
Event venue: 
{
  id: "venue",
  inputType: "location",
  title: "Event Venue",
  description: "Where the event will be held",
  placeholder: "Search for a venue...",
  validation: { required: true }
}
The actual Google Places picker is rendered in the Linktree admin (frontyard). The dev server shows a preview placeholder.

​
Best Practices

  1. Provide clear descriptions explaining what type of location is expected
  2. Use custom placeholders to guide users on what to search for
  3. Consider using arrays when users need to add multiple locations
  4. Handle optional fields - rating, photos, etc. may not be available for all places

​
Next Steps

Text Inputs

Text, textarea, URL, and number inputs

Advanced Elements

Arrays, integrations, and conditional display

Selection Controls

Select, radio, and checkbox elements

Back to Reference

Return to settings reference overview