Address Input
A postal address whose shape follows the country. A US form asks for a State and a ZIP; a UK one asks for a County and a Postcode; Japan puts the postal code first. Shipping the US layout everywhere is how forms reject valid addresses.
src/components/ui/address-input.tsxAbout
From the component's own source, where it was written.
A structured postal address whose shape follows the selected country.
The country comes first and everything below it re-labels. A US form asks for a State and a ZIP code; a UK one asks for a County and a Postcode and treats the region as optional; Japan puts the postal code above the prefecture. Shipping the US layout to everyone is how forms end up rejecting valid addresses.
Nothing is validated against a format table beyond requiredness. Postal code regexes are famously wrong — Irish Eircodes, BFPO addresses, new UK districts — and a form that refuses a real address is worse than one that accepts a typo the courier will query.
autoComplete tokens are set on every field. The browser can fill a whole address from one tap, and it only does so when the tokens are right.
Install
npx astralyx-ui add address-input
Usage
import { AddressInput } from '@/components/ui/address-input'
<AddressInput value={address} onValueChange={setAddress} />Composer
Change the props and the source below follows.
<AddressInput value={address} onValueChange={setAddress} />Examples
Country-aware fields
const [address, setAddress] = useState({ ...emptyAddress, country: 'US' })
<AddressInput value={address} onValueChange={setAddress} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
AddressInput
Extends Omit<ComponentProps<'div'>, 'onChange' | 'value'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | AddressValue | EMPTY | { country, line1, line2, city, region, postalCode }. Structured, not a single textarea, so it can be validated and shipped. |
| onValueChange | (value: AddressValue) => void | — | — |
| countries | string[] | COUNTRIES | — |
| size | 'sm' | 'default' | 'default' | — |
| disabled | boolean | — | — |
| countryLabel | ReactNode | 'Country' | — |
| countryPlaceholder | string | 'Select country…' | — |
| countrySearchPlaceholder | string | 'Search countries…' | — |
| addressLabel | string | 'Address' | — |
| addressLine2Label | string | 'Apartment, suite, etc.' | — |
| cityLabel | string | 'City' | — |
| optionalLabel | ReactNode | '(optional)' | Suffix marking a non-required field. |
| autoComplete | set on every field | — | Which is the only reason a browser can fill the whole address from one tap. |
Functions
| Function | Signature | Description |
|---|---|---|
| addressRules | Record<string, CountryRules> | — |
| emptyAddress | AddressValue | — |
Types
AddressValue
A structured postal address whose shape follows the selected country.
| Field | Type | Description |
|---|---|---|
| country | string | Region and postal-code labels, requiredness and field order all follow the selected country. Hong Kong and the UAE have no postal codes at all. |
| line1 | string | — |
| line2 | string | — |
| city | string | — |
| region | string | — |
| postalCode | string | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| validation | requiredness only | No postal-code regexes. They are famously wrong — Eircodes, BFPO, new UK districts — and a form that refuses a real address is worse than one that accepts a typo. |