Default
Show the codeHide the code
Default, code
<AddressField legend="Delivery address" section="shipping" />AddressField
A UK postal address as separate fields with the right autocomplete tokens, so browsers fill it in one go.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Fieldset of text inputs (pattern)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
With county
Show the codeHide the code
With county, code
<AddressField
legend="Delivery address"
section="shipping"
showCounty
defaultValue={{ line1: '12 Park Row', town: 'Leeds', county: 'West Yorkshire', postcode: 'LS1 5HD' }}
/>Invalid
Show the codeHide the code
Invalid, code
<AddressField
legend="Delivery address"
section="shipping"
isRequired
defaultValue={{ line1: '12 Park Row', town: 'Leeds', postcode: 'LS1' }}
errors={{ postcode: 'Enter a full postcode, like LS1 5HD' }}
/>Tokens
The 3 design tokens AddressField reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 3 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.text.default | … | --sd-color-text-default |
| spacing.stack.sm | … | --sd-spacing-stack-sm |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/address-fieldThen import it
import { AddressField } from "@/components/ui/address-field"Props
| Prop | Type | What it does |
|---|---|---|
legend | stringDefault 'Address' | Legend for the group. Default "Address". |
name | stringDefault 'address' | Prefix for the field names (line1, line2, town, county, postcode). |
defaultValue | Partial<AddressValue> | |
errors | Partial<Record<keyof AddressValue, string>>Default {} | Errors per part, e.g. { postcode: "Enter a real postcode, like LS1 4AP" }. |
isRequired | boolean | |
showCounty | booleanDefault false | Show the optional county line. Default false (it is rarely needed in the UK). |
section | 'shipping' | 'billing' | "shipping" or "billing" section prefix for autocomplete (1.3.6). |
className | string |
When to use it
Use it for
- Delivery and billing addresses
- Any form that needs a postal address
Use something else for
- A postcode lookup: add your lookup above this pattern (keep the manual fields as the fallback)
Accessibility
Screen readers announce "Delivery address, group" then "Address line 1, edit text".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Never make county required
- Accept postcodes in any case and spacing
Shared patterns it ships with: 1.3.6 (address autocomplete tokens); 3.3.5 (postcode example in errors).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 80 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 250 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 66 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 72 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches address line 1 |
| Tab | Tab moves through line 2 to the town |
| Tab | Tab reaches the postcode |
In Figma
The Figma component is AddressField, with Section (None, Shipping, Billing). The Figma library isn’t published yet.
Figma to code: Show county → showCounty; Legend → legend; Section → section (None, Shipping = "shipping", Billing = "billing"); nested TextField → defaultValue|errors|isRequired (each nested TextField: its Value is that part of defaultValue, Invalid with its FieldError message is errors, Show required on the first label is isRequired).