Fieldset

Related fields grouped under one legend, wrapping the Base UI Fieldset. It renders a native fieldset, so disabling the group disables everything inside the way browsers already understand.

Playground

Flip Disabled and tab through the preview: both inputs drop out of the tab order and the legend dims, with nothing set on the fields themselves.

States

Enabled or disabled is the whole story; hover and focus belong to the controls inside, and a disabled group takes them out of the tab order entirely.

Styling states

The root and legend both carry data-disabled while the group is off, so custom styling never needs JavaScript:

.ub-fieldset[data-disabled] .ub-fieldset-legend {
  color: var(--ub-text-disabled);
}

Props

Both parts pass every native attribute through; the legend is an accessible name, not a styling hook. The essentials:

One quirk: a native fieldset refuses to shrink below its content (browsers default it to min-width: min-content), which breaks inside flex and grid layouts; Bones resets that to 0, so the group behaves like any other block.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

FieldsetRoot and FieldsetLegend, from @usebones/react.
- Put Field components (FieldRoot + FieldLabel + a control) inside FieldsetRoot; FieldsetLegend names the group.
- disabled on the root disables every control inside (native fieldset behavior); nothing to set on the fields.
- For a whole form, wrap fieldsets in the Bones Form component.
- Restyle in CSS via .ub-fieldset, .ub-fieldset-legend, [data-disabled]. Tokens only.