Fieldset

Groups related fields under a legend; disabling it disables every field inside.

Billing details

Company

City

Postal code

When to use

Use when: Grouping related fields under one legend, such as an address.
Avoid when: There is only one field; use Field.

Installation

bunx shelf add fieldset

The source lands in src/components/ui/fieldset.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Fieldset from "@/components/ui/fieldset";

<Fieldset.Root>
  <Fieldset.Legend>Billing details</Fieldset.Legend>
  <Field.Root>…</Field.Root>
</Fieldset.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.