Fieldset
Groups related controls under one native, accessible legend.
Contract
Root renders a native <fieldset>. Legend renders its native <legend> by default, giving the group an accessible name. Each child control still needs its own visible label: put the control and a TRField.Label in a TRField.Item, which scopes that label to the control inside it — no id or htmlFor required. Every TRField.Item needs a TRField.Root ancestor, so group the items under one TRField.Root inside Root and give that root a gap override to keep the fieldset's spacing. Setting disabled on Root uses native form-control propagation.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/fieldset.css';Scroll inside the code area to read long lines.
Imports
import { TRFieldset } from '@tinyrack/ui/components/fieldset';Scroll inside the code area to read long lines.
Playground
Usage
Examples
API
TRFieldsetRoot and TRFieldsetLegend are exported individually and as TRFieldset.Root and TRFieldset.Legend.
| Part | Public contract |
|---|---|
Root | Native fieldset attributes, disabled, render, className, style, events, and ref |
Legend | Native legend by default; accepts render, className, style, events, and ref |
Use render only when native <legend> placement is unsuitable. Base UI keeps a custom-rendered legend associated with the fieldset through aria-labelledby.