Checkbox Group
A named set of checkboxes. The fieldset, and nothing more.
import { CheckboxGroup } from "@dede-style/ui/checkbox", then <CheckboxGroup label="Notifications"> around the Checkboxes. It renders a real <fieldset> with the label as its <legend>, and holds no state: each box inside stays controlled on its own.
What it adds is the name. A sighted reader groups three boxes under a heading at once; a screen reader hears three unrelated checkboxes unless something says what they are options of. A <legend> inside a <fieldset> is announced before the first option, so “Order updates” is heard as a kind of notification rather than as a phrase on its own.
It holds no value, on purpose. The options are independent — tick two, tick none — and each Checkbox stays controlled by whoever owns it. A group that owned their values as a set would be a second place for each one’s state; a consumer that wants a set holds one. It is the same fieldset a Radio Group renders, which needs the value because its options are not independent.
Hidden label
When something beside the group already names it, the legend hides and the name stays.
hideLabel takes the words out of the layout and leaves the name in the tree. This group is “Privacy”, and on a settings page the section heading above it would already say so; a visible legend would say it twice. But a heading is not a legend, and a screen reader moving straight to the first control never passes it. So the legend stays, hidden the way a hidden checkbox label is, and the group is still called “Privacy”.
Disabled
One option set aside, and a whole set set aside, are two different props.
isDisabled on a Checkbox says this option cannot be chosen; on the CheckboxGroup it says the whole set is off the table. The first is the usual case — paper copies are not on this plan, and the row stays in the list so the reader knows it exists. The second is disabled on the fieldset, which the browser carries to every control inside, so nothing is told per box: each row dims itself off its own input, and the legend dims with them. A ticked box in a disabled set stays ticked — the form still knows what was chosen before the set went dark.