Chapter 24: Fieldset

Core Idea

A two-part native-<fieldset>-equivalent for grouping multiple related controls (a radio group, a checkbox group, a multi-thumb slider) under one accessible legend, typically composed via render onto the actual group primitive (render={<RadioGroup />}).

Key Concepts

• Anatomy: Root → Legend — that's the whole component; grouping logic itself lives in whatever it wraps via render (RadioGroup, CheckboxGroup, Slider).
• Composition pattern: <Fieldset.Root render={<RadioGroup />}><Fieldset.Legend>Storage type</Fieldset.Legend>...</Fieldset.Root> — Fieldset supplies the accessible group name; the wrapped component supplies the actual selection behavior (see ch009 Forms for the full worked pattern with Field.Item).

Reference Tables

Part	Notable props	Notable data attributes
Root	(composes via render)	—
Legend	—	—

Key Takeaways

1. Use Fieldset whenever a single label needs to apply to a group of controls rather than one control — a lone Field.Label only labels a single control.
2. Compose it onto the group primitive with render, don't nest it as a separate DOM wrapper — that keeps the semantic <fieldset>/<legend> pairing intact instead of adding an extra non-semantic div.

Connects To

• ch009 (Forms): the canonical worked examples (range slider, radio group, checkbox group) using Fieldset.Root render={<X />} + Fieldset.Legend.
• ch017 (Checkbox Group), ch036 (Radio), ch040 (Slider): the group primitives most commonly composed with Fieldset.