Form

Form router component (currently only supports location type). Delegates to specific form implementations based on type.

Import

import { Form } from '@adoptaunabuelo/react-components';

Props

type

'location'

required

Form type to render

isLoaded

boolean

required

Whether Google Maps API is loaded (required for location form)

design

'primary' | 'secondary' | 'third'

Visual design variant for input fields

placeholder

string

Custom placeholder text for the address input

defaultLocation

LocationProps

Default/initial location data

onSubmit

(result: { data?: LocationProps; error?: string }) => void

required

Callback fired when form data changes or validation occurs

style

React.CSSProperties

Custom styles for the form container

LocationProps

route

string

Street name

routeNumber

string

Street number

routeInfo

string

Additional address info (apartment, suite, etc.)

city

string

City name

province

string

Province/state

zipCode

string

Postal/ZIP code

country

string

Country name

address

string

Full formatted address string

Usage

<Form
  type="location"
  isLoaded={isGoogleMapsLoaded}
  onChange={(location) => setLocation(location)}
/>

Notes

Requires Google Maps API: Must load Google Maps JavaScript API with Places library before use
Location form includes Google Places autocomplete
Validates that street number is provided
Shows error message if street number is missing
Auto-populates city, province, and postal code from Google Places
Additional fields (apartment, etc.) shown after address is selected
City, province, and postal code fields are read-only (populated by autocomplete)
Form calls onSubmit with either data (valid location) or error (validation message)

Components

Constants

Form

Form

Import

Props

LocationProps

Usage

Notes

Build docs developers (and LLMs) love

Components

Constants

​Form

​Import

​Props

​LocationProps

​Usage

​Notes

Build docs developers (and LLMs) love

Form

Import

Props

LocationProps

Usage

Notes