Fieldset

A semantic wrapper for related form controls with a shared legend.

Newformlayoutsemantic

Loading preview...

Installation

npx baseui-cn add fieldset

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

<Fieldset className="space-y-4">
  <FieldsetLegend>Billing details</FieldsetLegend>
  {/* related fields */}
</Fieldset>

Compose Fieldset with your existing Field primitives for grouped forms that stay semantic and readable.

Loading preview...

Fieldset supports native disabling. When disabled is set, all child controls become non-interactive while retaining clear structure.

Loading preview...

Use Fieldset to group larger sets of related fields, such as an address or checkout form.

Loading preview...

Renders a native <fieldset> element via Base UI's Fieldset.Root.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables all child form controls semantically via the native `fieldset[disabled]` attribute
`className`	`string`	—	Additional classes merged onto the root element
`children`	`React.ReactNode`	—	Content of the fieldset

Prop	Type	Default	Description
`variant`	`"default" \| "border"`	`"default"`	`"border"` adds a bottom border rule below the legend
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls font-size and vertical padding of the legend
`className`	`string`	—	Additional classes merged onto the legend element
`children`	`React.ReactNode`	—	Legend text or content

See the Base UI Fieldset documentation for the full API reference, including all props, data attributes, and CSS classes.