Fieldset

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/fieldset.json

npx shadcn@latest add https://prototyper-ui.com/r/fieldset.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/fieldset.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/fieldset.json

This will add the following files to your project:

• components/ui/fieldset.tsx

Usage

import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"

<Fieldset>
  <FieldsetLegend>Preferences</FieldsetLegend>
  {/* form controls */}
</Fieldset>

Anatomy

<Fieldset>
  <FieldsetLegend />
  {/* Field, Checkbox, RadioGroup, or other controls */}
</Fieldset>

Examples

Disabled

With Fields

Styling

Data Slots

Use data-slot attributes to target specific parts of the fieldset:

Customization Examples

/* Tighter fieldset spacing */
[data-slot="fieldset"] {
  @apply gap-4;
}

/* Style the legend as a smaller label */
[data-slot="fieldset-legend"] {
  @apply text-sm text-muted-foreground;
}

{/* Label-sized legend variant */}
<Fieldset>
  <FieldsetLegend variant="label">Settings</FieldsetLegend>
  {/* ... */}
</Fieldset>

API Reference

Fieldset

Root container that groups related form controls. Renders a <fieldset> element.

All Base UI Fieldset.Root props are forwarded via ...props.

FieldsetLegend

Accessible legend that is automatically associated with the fieldset. Renders a <div> element.

All Base UI Fieldset.Legend props are forwarded via ...props.

Accessibility

ARIA Attributes

• Fieldset renders a <fieldset> element with native grouping semantics.
• FieldsetLegend renders a <div> but is automatically associated with the fieldset via aria-labelledby.
• When disabled is set on the fieldset, all nested controls inherit the disabled state.
• Screen readers announce the legend as the group label when navigating into the fieldset.

Related