Fieldset
Fieldset gives a set of related fields one visible group name, optional group help, and a group-level error. The web API stays on the native fieldset and legend, one root hook, two message hooks, and an optional boxed variant.
Public web API
The native fieldset and legend carry the group semantics. The hooks add group messages and the boxed look.
<fieldset data-bitsy-fieldset aria-describedby="channels-help">
<legend>Notification channels</legend>
<p id="channels-help" data-bitsy-fieldset-description>
Pick where we send account alerts.
</p>
<label><input type="checkbox" name="channels" value="email" /> Email</label>
<label><input type="checkbox" name="channels" value="sms" /> Text message</label>
</fieldset>
<fieldset
data-bitsy-fieldset
data-bitsy-variant="boxed"
aria-invalid="true"
aria-describedby="shipping-error"
>
<legend>Shipping address</legend>
<!-- grouped fields -->
<p id="shipping-error" data-bitsy-fieldset-error>
We can't ship to this address yet.
</p>
</fieldset>plain is the default; add data-bitsy-variant="boxed" for a bordered panel. Native disabled on the fieldset disables every control inside.
Variants and states
Each group below uses real controls, so disabled and error behavior is the native behavior.
Foundation versus Bit
A raw <fieldset> still gets the foundation's bordered panel. data-bitsy-fieldset adds the plain default, a legend styled as a group title, group help and error hooks, and consistent spacing for field Bits inside it. Single-choice sets belong to Radio Group, and horizontal label-column layouts are a future Pattern.