Inputs
Fieldset
Groups related controls under a shared, semantic label using a native fieldset and legend.
Import
import { Checkbox, Fieldset, Radio, RadioGroup } from "@loamui/core";Usage
Every example has a CSStab. That’s the real, complete stylesheet for the component: plain, static CSS, with nothing running in the browser.
Grouping checkboxes
The legend names the group in the accessibility tree, the correct way to label a set of related controls.
Optional group
Mark the whole group optional in words rather than with an asterisk.
With a RadioGroup
RadioGroup renders a Fieldset internally, so a legend labels the set of radios.
Guidance
When to use it
- To label a set of related controls (a group of checkboxes, or a set of radios) with a single group name.
- Whenever a group of inputs needs one shared question or heading above them.
When not to
- For a single labelled control: use Field (or a control's own label).
- As a generic layout box: Fieldset carries grouping semantics, not just spacing.
Accessibility
- Renders a native <fieldset> + <legend>: the legend is announced as the group's name when a control inside receives focus.
- This is preferred over a <div role="group"> with aria-labelledby: the native semantics are better supported.
- The browser's default fieldset border, margin and padding are reset so it composes cleanly with LoamUI's layout.
How it works
The legend is the question
Write the legend as the question the group answers: “How should we contact you?”, not the category “Contact”. Screen readers announce it alongside each control's own label, so every option is heard in the context of the question. That also keeps each control's label short: the shared part of the wording lives in the legend once, not in every label.
One question per fieldset
Everything inside the fieldset is announced under the legend's name, so a fieldset holding two unrelated questions mislabels half its controls. Give each question its own fieldset, and avoid nesting them: a legend inside a legend multiplies what is read before every control. Some services go as far as one question per page with the legend as the page heading; the transferable core for a component library is the one-legend-one-question rule, not the page pattern.
Parts
Fieldset.Root
Renders a native <fieldset> grouping the controls; native <fieldset> props are forwarded.
Fieldset.Legend
The accessible group label; native <legend> props are forwarded.
| Prop | Type | Default | Description |
|---|---|---|---|
optional | boolean | false | Appends "(optional)". Optional is marked in words, not with an asterisk. |