shadcn.io is not affiliated with official shadcn/ui
Address Book Checkout Block for Vue
Saved delivery addresses as radio cards: choose one, make it the default, edit or add one in a form with a ZIP check, and see the street and delivery note you chose before you go on.
Installation
Overview
Choose, change and default a delivery address inside the checkout, with this address book for Vue with Ark UI. A compact header from Mulberry Yard, a florist, sits over a hairline panel. The first band is a Radio Group of saved addresses, Home, Studio and Mum's, as cards on shared hairlines, each with the recipient, the full street, the city, state and ZIP, and the note for the driver. A Badge says which one is the default, and each card has two quiet actions: Edit, and Make default. A fourth cell, Add an address, opens the same form. The form opens in a band under the cards with real rules: a name for the address, a recipient, a street with its number, a city, a two-letter state, a five-digit ZIP and an optional note. A ZIP check compares the ZIP with a small table and, when the city disagrees, says which city the ZIP belongs to. Choosing a card fills the "Delivering to" band under it, and "Deliver to Home" is the one Shine Button. It's built from Radio Group, Field, Input, Badge, Button, Shine Button and Guides, with a CSS entrance only. For flowers, groceries, gifts and any checkout where people send to more than one door.
FAQ
What is the difference between chosen and default?
Chosen is where this order goes; default is the address that is pre-selected next time. The chosen card has a foreground ring and drives the "Delivering to" band and the primary's label. The default card carries a Default badge, and Make default moves the badge without changing the choice. Pressing Make default on the card that already has it answers "already the default" instead of doing nothing.
How do editing and adding work?
Edit opens a form in a band under the cards, filled with that address, and moves focus to its first field; pressing Edit again closes it. Add an address opens the same form empty. Save address checks every field, names how many are wrong and moves focus to the first, or saves the card in place and puts focus on its Edit button. A new address is chosen as soon as it is saved. Cancel closes the form and returns focus to the button that opened it.
What does the ZIP check do?
A ZIP must be five digits. If it is one of the five in the demo's table (San Francisco, Chicago, New York, Austin and Seattle), the city you typed must match, and when it does not the problem line says which city and state the ZIP belongs to. Other five-digit ZIP codes are accepted as typed. With a real service you would replace the table with a lookup; the problem line and the focus behaviour stay the same.
How does it behave on a phone?
The cards stack in one column and the form's fields go full width; the form opens under the cards, not in a popup, so nothing covers the address you are editing. The primary button is pinned to the bottom of the screen and always names the address it will deliver to.
Is it usable with a keyboard and a screen reader?
Yes. The cards are real radio buttons in one group, so the arrow keys move the choice; Edit and Make default are buttons named for their card ("Edit Home", "Make default, Studio"); Edit says whether its form is open; each problem sits in a reserved line tied to its field; and one polite status line says what changed.
What stays local, and how do I connect it for real?
Everything: the three addresses, the ZIP table and the saves live in this tab's state and nothing is sent. To connect it, load the addresses from your customer API, make Save address and Make default call it (keeping the optimistic update), validate the address with your delivery service, and have the primary pass the chosen address id to the order.