A component used to group related form controls and labels, making forms more accessible and easier to navigate.

Fieldset component

import * as React from 'react';
import { Fieldset } from 'gnome-ui/fieldset';
import { Field } from 'gnome-ui/field';
import { Checkbox } from 'gnome-ui/checkbox';
import { Check } from 'lucide-react';

export function FieldsetDefault() {
  return (
    <form className="w-full max-w-sm">
      <Fieldset.Root className="flex flex-col gap-4 rounded-xl border border-border bg-card p-5 shadow-sm">
        <div className="flex flex-col gap-1">
          <Fieldset.Legend className="text-base font-semibold text-foreground">
            Notification Preferences
          </Fieldset.Legend>
          <p className="text-sm text-muted-foreground">
            Choose how you want to receive updates.
          </p>
        </div>
        
        <div className="flex flex-col gap-3">
          <Field.Root className="flex items-center gap-3">
            <Checkbox.Root id="email-notif" defaultChecked className="flex size-5 shrink-0 items-center justify-center rounded-md border border-input bg-card text-card-foreground shadow-sm transition-colors duration-150 hover:border-border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50">
              <Checkbox.Indicator className="flex items-center justify-center">
                <Icons.Check className="size-3.5" strokeWidth={3} />
              </Checkbox.Indicator>
            </Checkbox.Root>
            <Field.Label htmlFor="email-notif" className="text-sm font-medium text-foreground cursor-pointer select-none">
              Email notifications
            </Field.Label>
          </Field.Root>

          <Field.Root className="flex items-center gap-3">
            <Checkbox.Root id="sms-notif" className="flex size-5 shrink-0 items-center justify-center rounded-md border border-input bg-card text-card-foreground shadow-sm transition-colors duration-150 hover:border-border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50">
              <Checkbox.Indicator className="flex items-center justify-center">
                <Icons.Check className="size-3.5" strokeWidth={3} />
              </Checkbox.Indicator>
            </Checkbox.Root>
            <Field.Label htmlFor="sms-notif" className="text-sm font-medium text-foreground cursor-pointer select-none">
              SMS Messages
            </Field.Label>
          </Field.Root>
        </div>
      </Fieldset.Root>
    </form>
  );
}

Anatomy

import { Fieldset } from 'gnome-ui/fieldset';

<Fieldset.Root>
  <Fieldset.Legend />
  {/* Form controls */}
</Fieldset.Root>

Examples

Disabled State

When the disabled prop is applied to the <Fieldset.Root>, all form controls inside it are automatically disabled.

Fieldset component

import * as React from 'react';
import { Fieldset } from 'gnome-ui/fieldset';
import { Field } from 'gnome-ui/field';

export function FieldsetDisabled() {
  return (
    <form className="w-full max-w-sm">
      <Fieldset.Root disabled className="group flex flex-col gap-4 rounded-xl border border-border bg-card p-5 shadow-sm">
        <div className="flex flex-col gap-1">
          <Fieldset.Legend className="text-base font-semibold text-foreground group-disabled:text-muted-foreground">
            Billing details
          </Fieldset.Legend>
          <p className="text-sm text-muted-foreground">
            You do not have permission to edit this section.
          </p>
        </div>
        
        <div className="flex flex-col gap-3">
          <Field.Root className="flex flex-col gap-1.5">
            <Field.Label className="text-sm font-medium text-muted-foreground">
              Name on card
            </Field.Label>
            <Field.Control className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-visible:border-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50" defaultValue="Jane Doe" />
          </Field.Root>

          <Field.Root className="flex flex-col gap-1.5">
            <Field.Label className="text-sm font-medium text-muted-foreground">
              Card number
            </Field.Label>
            <Field.Control className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-visible:border-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50" defaultValue="**** **** **** 4242" />
          </Field.Root>
        </div>
      </Fieldset.Root>
    </form>
  );
}

FieldsetLegend

An accessible label that is automatically associated with the fieldset. Renders a <div> element.

Documentation: Base UI Fieldset

API reference

Root

Groups a shared legend with related controls. Renders a <fieldset> element.

Root Props:

Prop	Type	Default	Description
className	`string \| ((state: Fieldset.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Fieldset.Root.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Fieldset.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Legend