TrademarkTrademark
Docs
Ctrl k
Search docs...
Form Controls

Fieldset

Updated: October 17, 2026
View on GitHub
Soon
Not released yet. This is on main and is not in any published version yet. It will not install today.

Fieldset groups related fields under a name. It renders a real <fieldset> and <legend>, so a screen reader announces the section on entering it, and disabled turns off every native control inside at once. The fields are laid out by a Form grid, so a section takes the same density, columns and span.

Sections in a form

Put several sections in one Form. Each one fuses its own group of corners, and takes the form's size unless it sets its own.

Disabled

disabled disables every native control in the section, the way a disabled <fieldset> always has. Use it for a section that does not apply yet, such as a shipping address while "same as billing" is checked.

API reference

Type
Default
legend
The section's name, rendered as its legend.
ReactNode—
description
A line under the legend, read out as the section's description.
ReactNode—
span
Columns to occupy inside an outer Form grid.
number—
disabled
Disable every native control in the section.
boolean—
name
The fieldset's name, for form.elements.
string—
density
Gap and grouping for the section's fields, as on Form.
"stacked" | "tight" | "spacious""tight"
columns
Grid columns, as on Form.
FormColumns1
size
Size for every field in the section. Defaults to the outer form's.
TShirtSizes—
Edit this page on GitHub
TrademarkTrademark
Built with curiosity by Lorant One and the Design Engineers Club