Fieldset React component
A grouped form section on the native fieldset: the legend sits in a notch in the border, the group folds away to a one-line summary, a tick appears once it's complete, an error outlines it in coral, and disabling it disables every control inside.
When to use the Fieldset component
Use Fieldset to split long forms into named groups: checkout steps, account settings, onboarding questions. Screen readers announce the legend with every field inside it.
Fold finished groups away with a summary so people can review a long form at a glance, and use disabled to switch off a whole group at once (like a billing address that matches shipping).
Installation
Add the Fieldset component to your project with the shadcn CLI. It lands in components/fieldset.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/fieldset.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<Fieldset /> accepts 13 props, all optional.
| Prop | Type | Default |
|---|---|---|
| legend | string | "Account details" |
| description | string | "Used on receipts and when we need to reach you." |
| children | React.ReactNode | — |
| collapsible Let people fold the group away to its legend (and summary). | boolean | true |
| open | boolean | — |
| defaultOpen | boolean | true |
| onOpenChange | (open: boolean) => void | — |
| summary Shown beside the legend while collapsed, e.g. what was filled in. | React.ReactNode | — |
| disabled Disables every control inside (native fieldset behaviour). | boolean | false |
| error Marks the group invalid and shows this message under it. | string | — |
| complete A small tick in the legend once the group is complete. | boolean | false |
| theme | "dark" | "light" | "dark" |
- legendstringDefault: "Account details"
- descriptionstringDefault: "Used on receipts and when we need to reach you."
- childrenReact.ReactNode
- collapsible
Let people fold the group away to its legend (and summary).
booleanDefault: true - openboolean
- defaultOpenbooleanDefault: true
- onOpenChange(open: boolean) => void
- summary
Shown beside the legend while collapsed, e.g. what was filled in.
React.ReactNode - disabled
Disables every control inside (native fieldset behaviour).
booleanDefault: false - error
Marks the group invalid and shows this message under it.
string - complete
A small tick in the legend once the group is complete.
booleanDefault: false - theme"dark" | "light"Default: "dark"
Show all 13 propsShow fewer
| className | string | — |
- classNamestring
FAQ
- Why a native fieldset?
- It gives the legend its notch in the border, announces the group name to screen readers, and disables every field inside with one attribute while keeping the legend's toggle usable.
- What shows when it's collapsed?
- The legend and your summary text, so people can still see what they entered. Clicking the legend opens it again.
- How are errors shown?
- Pass error: the border and legend turn coral and the message appears below, linked to the group for assistive tech.
