# Smart Address

One address field that splits a pasted address into street, city, region, postcode and country, flying each word from where it was pasted into its own field.

- Page and source: https://uibrik.com/components/smart-address
- Install: `npx shadcn@latest add https://uibrik.com/r/smart-address.json`
- Packages (installed by the CLI): motion, react-use-measure
- Import: `import { SmartAddress } from "@/components/uibrik/smart-address/smart-address"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Address"` | Label of the single field before it splits. |
| placeholder | `string` | `"Paste a full address"` | Placeholder of the single field. |
| labels | `string[]` | `["Street","City","Region","Postcode","Country"]` | Labels for street, city, region, postcode and country, in that order. |
| duration | `number` | `0.5` | Length of the split: fields unfolding from under the street field and words landing in them. |
| stagger | `number` | `0.035` | Delay between one field and the next, in reading order. |
| radius | `number` | `18` | Corner radius of each field. |
| value / onChange | `Address / (address: Address) => void` |  | Controlled address: { street, city, region, postcode, country }. |
| defaultValue | `Partial<Address>` |  | Address on mount when uncontrolled. Anything past the street opens the full form. |
| parse | `(raw: string) => ParsedAddress` | `parseAddress` | Swap in your own parser. The built-in one runs offline and keeps anything it can't place in the street line. |
| ref | `Ref<{ paste(text): void; clear(): void }>` |  | Split an address from code, or empty the form. |
| className | `string` |  | Classes for the wrapper. |