AddressInput

Borders · src/components/AddressInput/AddressInput.tsx

An address, in the order the country writes it.

Korea runs postal code first and largest to smallest; India and the US run smallest to largest. Those are different forms, not one form with relabelled boxes, and a single "street / city / state / zip" layout is a US form wearing a neutral name.

An unknown country gets one textarea, not the US layout. That is the honest answer: the system does not know how that address is written, so it accepts it as written and does not lose a part of it by insisting on boxes that do not fit.

Postal codes are tidied on blur rather than validated on keystroke. Spaces, case and punctuation are how people write them, and rejecting the input as they type teaches nothing.

Import

import { AddressInput } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
id	string
label	React.ReactNode
hint	React.ReactNode
country	string	ISO country code. KR, IN and US have field orders; anything else gets one free field.
value	AddressValue
error	string | Partial<Record<keyof AddressValue, React.ReactNode>>	A string for the free-form variant, or per-field errors for a known country.
className	string
onChange	(value: AddressValue, key: keyof AddressValue) => void

Exported types

AddressValue