Fieldset

A high-quality, styled React fieldset component built with @base-ui/react for grouping related form controls with a shared legend.

The Fieldset component groups related form controls and provides accessible group labeling via its legend part.

Usage

import { Fieldset } from "@/components/ui/fieldset";
import { Field } from "@/components/ui/field";

export function ExampleFieldset() {
  return (
    <Fieldset.Root>
      <Fieldset.Legend>Billing Details</Fieldset.Legend>
      <Field.Root>
        <Field.Label>Company</Field.Label>
        <Field.Control placeholder="Enter company name" />
      </Field.Root>
      <Field.Root>
        <Field.Label>Tax ID</Field.Label>
        <Field.Control placeholder="Enter fiscal number" />
      </Field.Root>
    </Fieldset.Root>
  );
}

Preview

Billing Details

Company Name

Tax ID

Anatomy

import { Fieldset } from "@base-ui/react/fieldset";

<Fieldset.Root>
  <Fieldset.Legend />
</Fieldset.Root>;

API Reference

Fieldset.Root Props

Prop	Type	Default	Description
`variant`	`'default' \| 'bordered'`	`'default'`	Visual layout framing variant.
`disabled`	`boolean`	`false`	Disables interaction for all wrapped field controls.