Fieldset

Preview

Shipping address

First name

Last name

Street address

Installation

npx shadcn@latest add @cubby-ui/fieldset

Usage


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


<Fieldset>
  <FieldsetLegend />
</Fieldset>

Examples

With Radio Group

Compose Fieldset with RadioGroup using the render prop to merge elements.

Notification preferences

All notifications

Mentions only

None

With Checkbox Group

Compose Fieldset with CheckboxGroup using the render prop.

Permissions

Read

Write

Admin

Select which permissions to grant this user.

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

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).

Fieldset

On this page