Fieldset

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/fieldset

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Composition

Every part is a separate export. Fieldset owns state; the rest are presentational and must appear in this order.

Fieldset└── FieldsetLegend

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Fieldset>
  <FieldsetLegend>Shipping address</FieldsetLegend>
  <Field name="street">
    <FieldLabel>Street</FieldLabel>
    <FieldControl placeholder="123 Main St" />
  </Field>
  <Field name="city">
    <FieldLabel>City</FieldLabel>
    <FieldControl placeholder="Metropolis" />
  </Field>
</Fieldset>

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Fieldset — see its reference for the full keyboard map.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

Source

src/components/ui/fieldset/fieldset.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.