A React fieldset with a Liquid Glass legend for grouping related form fields.
Fieldset renders a native <fieldset> with an accessible legend and groups related fields under one heading. Each field keeps its own label, description, and validation message; Fieldset only provides the shared group semantics and spacing.
Use Fieldset when several fields belong together, such as billing details or notification preferences. For a single control, use a Field. Controls that already render their own label, such as CheckboxGroup and RadioGroup, keep that label instead of taking one from the fieldset.
Pass the grouped fields as children. The legend names the whole group and is linked to the native <fieldset> with aria-labelledby.
disabled is forwarded to the native <fieldset>, to Base UI's fieldset context, and to the package's nested form controls. Fields and controls become disabled together, and the legend fades.
Fieldset renders a native <fieldset> and links its legend with aria-labelledby. Each nested Field still provides the control's own label and description, and keyboard behavior belongs to the controls inside the group.
Always render a visible legend when the group needs a heading. If the design intentionally omits it, pass aria-label to the fieldset so the group still has an accessible name. See the accessibility guide for form patterns.
Fieldset
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Fields and controls grouped by the fieldset. Required. |
legend | ReactNode | — | Visible legend naming the group. |
disabled | boolean | false | Disables the native fieldset and nested fields and form controls. |
className | string | — | Tailwind classes merged into the fieldset root. |
style | CSSProperties | — | Inline styles merged into the same element as className. |
ui | { root?: ClassValue; legend?: ClassValue } | — | Tailwind classes for internal slots, keyed by data-slot. |
render | ReactElement | ((props, state) => ReactElement) | — | Replaces the fieldset root element. |
Additional Base UI Fieldset.Root props are forwarded, including id and native fieldset attributes.
| Attribute | Description |
|---|---|
data-disabled | Present when the fieldset is disabled. |
data-slot | Marks internal parts (root, legend) for styling. |
Fieldset has no glass surface of its own; it resets the native fieldset border, margin, and padding, then inherits the page material. Tune the shared --ui-drop-shadow-label token for the legend, use className for layout, and use ui for the root and legend slots keyed by data-slot. Component-specific values live in src/theme/fieldset.ts. See the theming guide for token layers and presets.