Address Book 5 - Shipping And Billing Form

Pro

One checkout form for the shipping address and the billing address, with a checkbox to keep them the same.

Shadcn Address Book 5 block

Component data

ID
address-book5
Access
pro
Created
Sep 5, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Address Book 5 block design & features

AddressBook5 is a checkout address form built with shadcn/ui Field, Input, Checkbox, Label, and Button. One bordered panel holds two groups. Shipping comes first: name, phone, street, apartment, city, region, postal code, and country. A muted bar between the groups carries the checkbox that keeps billing identical to shipping. While the checkbox is on, billing stays hidden and the invoice uses the shipping address. Unchecking it reveals a second field group for a separate billing address.

The panel is a single surface with hairline dividers, not a pair of choice cards. The footer repeats the billing line and a continue action. Confirming replaces the button with a short saved line.

This is a moderate, form-driven block. It needs a real recipient and a full postal address. The paired groups are what make it a ship-to and bill-to step rather than a saved-address list.

On small screens the fields stack in one column, and the footer stacks the summary above the button.