Fieldset
A group of related form fields with a common label.
Installation
pnpm dlx shadcn@latest add @columbus/fieldsetUsage
The legend names the group for screen readers. Fieldset has no default
layout, so pass className for spacing.
import { Field, FieldLabel } from "@/components/ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";
import { Input } from "@/components/ui/input";
<Fieldset className="gap-6 flex flex-col">
<FieldsetLegend>Billing details</FieldsetLegend>
<Field>
<FieldLabel>Company</FieldLabel>
<Input />
</Field>
</Fieldset>;Disabled
disabled disables every field inside the fieldset.
Checkbox and radio groups
To give a Checkbox Group or
Radio Group a visible legend,
render a Field as a Fieldset:
<Field name="plan" render={(props) => <Fieldset {...props} />}>
<FieldsetLegend>Plan</FieldsetLegend>
<RadioGroup>{/* ... */}</RadioGroup>
</Field>API reference
Fieldset and FieldsetLegend wrap Fieldset.Root and Fieldset.Legend from
Base UI Fieldset and accept all
their props. The legend is semibold by default.
Prop
Type