Fieldset

Groups related fields under one legend (Base UI Fieldset: native <fieldset>, disables all children together).

Import

import { Fieldset } from '@marbleui/ui'

Props

<Fieldset>

Prop	Type	Default
children *required	`ReactNode`	`—`
legend *required	`ReactNode`	`—`
className	`string`	`—`
description	`ReactNode`	`—`
disabled	`boolean`	`—`
variant	`'divided' \| 'card' \| 'plain'`	`'plain'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: Base UI Fieldset. Follow the primitive's docs for the full keyboard map.

Usage notes

Groups related fields under a legend, for example billing details or notification settings. For one set of choices use RadioGroup or CheckboxGroup instead, which carry their own label.

<Fieldset variant="card" legend="Billing details" description="Used on invoices.">
  <TextField label="Company" />
  <TextField label="Tax ID" />
</Fieldset>

legend is required. variant: plain (default), card or divided (legend left, fields right from the md breakpoint).
It renders a native <fieldset> via Base UI, and disabled disables the fields inside together.

Example source · show

import { Select, SelectItem } from '../select'
import { Switch } from '../switch'
import { TextField } from '../text-field'
import { Fieldset } from './fieldset'

export const styles = {
  Card: () => (
    <Fieldset variant="card" legend="Billing details" description="Used on invoices and receipts." className="w-80">
      <TextField label="Company" placeholder="Acme Inc." />
      <TextField label="Tax ID" placeholder="EU123456789" />
    </Fieldset>
  ),
  Divided: () => (
    <div className="w-[40rem] max-w-full">
      <Fieldset variant="divided" legend="Notifications" description="Choose how we reach you.">
        <Select label="Email digest" defaultSelectedKey="weekly">
          <SelectItem id="daily">Daily</SelectItem>
          <SelectItem id="weekly">Weekly</SelectItem>
          <SelectItem id="never">Never</SelectItem>
        </Select>
        <Switch defaultSelected>Push notifications</Switch>
      </Fieldset>
    </div>
  ),
  Plain: () => (
    <Fieldset legend="Shipping address" className="w-72">
      <TextField label="Street" placeholder="1 Infinite Loop" />
      <div className="grid grid-cols-2 gap-3">
        <TextField label="City" placeholder="Cupertino" />
        <TextField label="ZIP" placeholder="95014" />
      </div>
    </Fieldset>
  ),
}

Source: packages/ui/src/fieldset/fieldset.tsx

Catalog

Category: inputs
Priority: Foundation
Primitive: base-ui
Base UI: Fieldset