shadcn.io is not affiliated with official shadcn/ui
Procurement Contact Details Billing Block for React Aria
Three contacts for an account (billing, procurement lead, accounts payable) with a change picker, a same-as-billing checkbox and the mail routing worked out from the choices.
Installation
Overview
Say who gets which mail about an account, with this contact details section for React with React Aria. A hairline frame with a plus mark on each corner holds three cells (billing contact, procurement lead, accounts payable), each with an Avatar with initials, a name, the email with a Copy Button and a phone number. Change swaps the cell's details in place for a Native Select of team members, with "Someone outside the team" adding an email field that is checked before it is used. A Checkbox on the other two cells says "Same as billing contact" and follows it. Under the cells a list works out where renewal notices, purchase orders and invoices go, and says which of them share an address. The action foot counts what is unsaved, and the Shine Button saves it or Discard puts it back. On a phone the cells stack and the foot rides the bottom of the screen. For enterprise accounts, procurement teams and any billing page with more than one recipient.
FAQ
How do I change the team, the roles and the saved contacts?
Edit TEAM (each person has an id, initials, name, title, email and phone), ROLES (the label and the mail each role gets) and SAVED, which says who holds each role when the page opens. A role can also hold an outside email, which gets initials from its first two letters and no phone number.
What does Same as billing contact do?
It makes that role follow the billing contact: its cell shows the billing contact's details, its Change button is turned off, and when you change the billing contact the role follows. Unticking it goes back to the person that role had before. The routing list under the cells reads the final addresses, so two roles on one person show one address twice and the line under it says they share it.
How is someone outside the team checked?
The email field appears when you pick "Someone outside the team" (its space is held, so the cell does not jump), and "Use this contact" refuses an address that does not look like one, says so under the field and moves focus to it. It checks the shape only; it does not send a message.
What stays local, and how do I wire it for real?
Saving keeps the three contacts in the page ("Saved in this demo.") and nothing is sent. Replace the body of save with a call that stores the three roles, and fill TEAM from your members list. The addresses are shown with a copy button rather than as mail links, so nothing opens a mail app.
How does it work with a keyboard and a screen reader?
Every control is named for its role ("Change the billing contact", "Copy the procurement lead email"), the select and email field are labelled, and a single polite status line gives the unsaved count, the problem or the saved result. Opening Change moves focus to the select, and closing it returns focus to the Change button.