shadcn.io is not affiliated with official shadcn/ui
Fieldset Groups Contact Form Block for Radix UI
A lease contacts form with a primary and a billing fieldset side by side, where a Same as primary box copies the values across and locks the whole billing fieldset with the native disabled attribute.
Installation
Overview
Group related fields so the browser knows they belong together, with this fieldset groups form for React with Radix UI. A compact header sits over a hairline frame with a plus mark on each corner. Two native fieldsets, each with a real legend, sit side by side: Primary contact at the start and Billing contact in a wider side cell, each with a name, an email, a phone and a mailing address in Inputs. A Checkbox named Same as primary contact sits above the billing fieldset, outside it so it stays usable. Ticking it copies the four values across and sets disabled on the whole billing fieldset, which the browser applies to every control inside it; edits to the primary then follow into the locked copy. Unticking enables the fieldset and keeps what was copied. Save contacts checks the name and email of each person who can still be edited, names the first problem and focuses it. The Shine Button is the only colored control. It's built from Field (Field Set and Legend), Input, Checkbox, Shine Button and Guides, with a CSS entrance only. For billing and shipping addresses, owner and deputy, any pair of groups that are often the same.
FAQ
What does disabled on a fieldset do?
The disabled attribute on a fieldset disables every form control inside it, in one place, with no per-field prop. Disabled controls are not focusable and are left out of a native form submit, which is why the Same as box lives outside the fieldset and why the demo keeps its own copy of the values.
What happens to the copied values?
Ticking Same as primary copies the primary contact into the billing state and shows it in the locked fields; edits to the primary keep the copy in step. Unticking leaves the copy in place and unlocks the fieldset, so you start from the primary's values and change what differs.
Why a legend and not a heading?
A legend names the group for assistive technology: a screen reader reads "Billing contact" with each field in it. The block's own headings stay at the panel level.
How does it look on a phone?
The two fieldsets stack in reading order, the billing one under a rule, and the foot is pinned to the bottom with Save contacts at full width.