Fieldset

The Fieldset component groups related form controls in a real <fieldset>/<legend> pair: assistive tech announces the group by its legend, and the native disabled prop switches off every control inside at once — ideal while a save mutation is in flight. The awkward default layout of <fieldset> (border-notch legend, intrinsic min-width) is normalized away.

Import

import {
  Fieldset,
  FieldsetLegend,
  FieldsetDescription,
  FieldsetContent,
  FieldsetFooter,
} from '@nim-ui/components';

Basic usage

Shipping address

Used for carrier labels and customs forms.

Street

City

Saved 2 minutes ago

Code

<Fieldset>
  <FieldsetLegend>Shipping address</FieldsetLegend>
  <FieldsetDescription>Used for carrier labels and customs forms.</FieldsetDescription>
  <FieldsetContent>
    <FormField label="Street" name="street">
      <Input />
    </FormField>
    <FormField label="City" name="city">
      <Input />
    </FormField>
  </FieldsetContent>
  <FieldsetFooter>
    <span>Saved 2 minutes ago</span>
    <Button size="sm">Save</Button>
  </FieldsetFooter>
</Fieldset>

Disabling a whole section

Native disabled reaches every descendant control — no per-field wiring.

Billing profile

Locked while the invoice batch is processing.

Tax ID

Processing…

Code

<Fieldset disabled>
  <FieldsetLegend>Billing profile</FieldsetLegend>
  <FieldsetDescription>Locked while the invoice batch is processing.</FieldsetDescription>
  <FieldsetContent>{/* every control inside is disabled */}</FieldsetContent>
</Fieldset>

Props

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Native fieldset disabled — disables every descendant control
`className`	`string`	`-`	Additional CSS classes to apply
`children*`	`ReactNode`	`-`	Legend, description, content, and footer parts

Parts

Name	Type	Default	Description
`FieldsetLegend`	`legend`	`-`	Section title; names the group for assistive tech
`FieldsetDescription`	`p`	`-`	Supporting text under the legend
`FieldsetContent`	`div`	`-`	Field area with vertical spacing
`FieldsetFooter`	`div`	`-`	Footer band — hint text left, actions right

Accessibility

Real <fieldset>/<legend> semantics: screen readers announce the legend when focus enters any control in the group.
disabled is the native attribute, so disabled state is conveyed to assistive tech without extra ARIA.
Keep one legend per fieldset, and make it a concise noun phrase ("Shipping address", not a sentence).

Best Practices

Do

Group fields that operators think of as one unit (address, billing profile, notification rules)
Use disabled during mutations instead of disabling fields one by one
Put save-state hints in the footer's left slot and the action on the right

Don't

Nest fieldsets — flatten into sibling sections instead
Use Fieldset as a generic card; Card is for non-form content
Hide the legend — the group needs a visible name

FormLayout - Page-level form arrangement
FormField - Label + control + error wiring
Card - Non-form content container

Fieldset

On this page