/// Inputs
Fieldset
Semantic field group — a mono legend over a hairline content region that disables its children.
import { Fieldset } from "@protocore/pds";Basics
A legend captions the group and an optional description sits below it. The children render inside a hairline-bordered content region — group several Fields or controls together.
Disabled group
Setting disabled on the Fieldset cascades to every native form control inside via the built-in fieldset[disabled] behaviour — no need to disable each child.
When to use it
Use a Fieldset to group related fields under one heading — a billing address, a set of notification toggles, a permissions block — and to disable or enable them as a unit. It's the multi-field counterpart to Field, which wires a single label/hint/error to one control. Because it renders a real <fieldset> / <legend>, assistive tech announces the group name with each control inside, and disabled propagates natively.
Usage
Do
- Use a real `legend` — it names the group for screen readers.
- Group fields that are related and toggle together.
- Use `disabled` to gate a whole section (e.g. until a plan is chosen).
- Nest `Field`s inside for per-control labels and error messaging.
Don't
- Don't use it to wrap a single control — use Field.
- Don't disable each child by hand; set `disabled` on the Fieldset.
- Don't put a paragraph in the `legend`; use `description` for that.
- Don't convey grouping with the border alone — keep the legend.
Accessibility
- Renders a native `<fieldset>` with a `<legend>`, so AT associates the legend with every control inside as a group name.
- The native `disabled` attribute cascades to all descendant form controls — the recommended way to disable a section.
- The legend is mono uppercase to match PDS field captions; the description is muted sentence-case supporting copy.
Fieldset props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The grouped fields/controls. |
className | string | — | |
description | ReactNode | — | Supporting copy shown under the legend (muted, sentence-case). |
disabled | boolean | — | Disable the whole group — cascades to every native form control inside. |
legend | ReactNode | — | Group heading — rendered as a mono uppercase legend. |
style | CSSProperties | — |