Fieldset

Groups related controls under a shared legend, the way a native <fieldset> does. Use it to label a set of radio buttons, checkboxes, or a cluster of inputs that belong together. To label and validate a single control, use Field; to wrap the whole form, use Form.

Preview

Installation

npx shadcn@latest add @cubby-ui/fieldset

Usage

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

<Fieldset>
  <FieldsetLegend />
</Fieldset>

Composition

Fieldset
└── FieldsetLegend

Examples

With Radio Group

Use the render prop to merge Fieldset onto a RadioGroup.

With Checkbox Group

Use the render prop to merge Fieldset onto a CheckboxGroup.

API Reference

The Fieldset component is built on top of Base UI's Fieldset. All Base UI props are supported.

For the complete Base UI API, see the Base UI Fieldset documentation.

Props

Fieldset

Groups a shared legend with related controls. Renders a <fieldset> element. Supports the render prop for composing with other components like RadioGroup or CheckboxGroup.

FieldsetLegend

An accessible label automatically associated with the fieldset. Renders a <div> element (not a native <legend> to avoid browser styling issues).