ComponentsForms & inputs

Address field

A structured postal address in one fieldset: country, then province and district pickers for countries with region data (Türkiye's 81 provinces and 973 districts ship built in, loaded on demand), free text everywhere else. Changing a parent clears its children; read-only prints the address the way the country writes it.

Fieldset · Field · native select components/address-field.tsx, locale-data/tr/address.ts, locale-data/core/types.tstheme · material · accent · density · font
Shipping address

Deliveries go out from the Maltepe warehouse on weekdays.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { AddressField } from "@vamos-ui/react";

<AddressField
  legend="Billing address"
  name="billing"                      // billing[country], billing[region1]…
  defaultValue={{ country: "TR" }}
  required={["region1", "region2", "line1"]}
  onValueChange={(address) => save(address)}
/>

Turkish postal codes start with the plate code; a mismatch with the chosen province shows a hint, not an error.

Neighbourhoods (region3) are too large to bundle — fetch them from your own endpoint and pass them in.

Examples

Several countries

Countries without a data source get free-text State / Province and City fields; US gets a ZIP code label. formatAddress() orders the lines per country.

Billing address
Torstraße 109
10119 Berlin
Germany

Summary + edit in a dialog

For record pages: show the formatted line, edit in a Dialog, save on confirm.

Ege Pilates Studio · branch address

Alsancak Mah. 1482 Sk. No: 7 D: 3, 35220 Konak/İzmir

Region pickers alone

RegionSelect works without the fieldset — location filters, branch pickers.

Filtering 14 spa partners by location — Antalya.

Read-only

A semantic <address> block in the country's order: "34846 Maltepe/İstanbul", "San Francisco, CA 94104".

Registered office
Rasimpaşa Mah. Rıhtım Cad. No: 14Liman Han, Kat 334716 Kadıköy/İstanbulTürkiye
US billing entity
548 Market St, Suite 41820San Francisco, CA 94104United States

API

AddressField

PropTypeDefault
value / defaultValue
{ country, region1?, region2?, region3?, line1?, line2?, postalCode? } — regions are official names, not codes.
Address | null—
onValueChange
Every change. A new parent clears its children.
(address: Address) => void—
sources
Region data per country (provinces(), districts(code), both async).
Record<string, AddressDataSource>{ TR: trAddress }
countries
Country list (names via Intl.DisplayNames in the provider locale).
string[]all
defaultCountry
Initial country when there is no value.
stringTR for tr locales, else the locale region
fields
Parts to render.
AddressPart[]all except region3
required
Required parts (asterisk + native required).
AddressPart[]—
errors
Per-part error messages from your validation.
Partial<Record<AddressPart, ReactNode>>—
layout
Two columns from sm, or one.
"grid" | "stack""grid"
name
Form name prefix: billing → billing[country], billing[region1]…
string—
legend / hint
Fieldset legend and helper text.
ReactNode—
readOnly · disabled · size
Read-only renders a formatted <address>.
boolean · boolean · sm | md | lg—
labels
Built-in strings (address namespace).
Partial<AddressFieldLabels>—

RegionSelect

PropTypeDefault
source
e.g. trAddress from @vamos-ui/react/locale-data.
AddressDataSource—
level
Which list to show.
"province" | "district"—
province
Parent province name for districts; disabled until set.
string—
value / defaultValue / onValueChange
The region name.
string—
placeholder
First option text.
string—

formatAddress

PropTypeDefault
formatAddress(address, { locale?, includeCountry? })
Lines in the country's convention (TR, US/CA/AU, GB/IE, others).
string[]—
Previous
Activity timeline
Next
Alert Dialog