Radio Group
Radio Group lets a person pick exactly one option from a small visible set. The group is the Bit: a native fieldset and legend, radios that share one name, optional option and group descriptions, and one group error. No JavaScript.
Public web API
One root hook on the fieldset, one hook per option, and two message hooks. Selection, keyboard movement, and validation stay native.
<fieldset data-bitsy-radio-group aria-describedby="plan-help">
<legend>Plan</legend>
<p id="plan-help" data-bitsy-radio-group-description>
You can change plans at any time.
</p>
<div data-bitsy-radio-group-option>
<input id="plan-starter" type="radio" name="plan" value="starter" checked
aria-describedby="plan-starter-help" />
<label for="plan-starter">Starter</label>
<p id="plan-starter-help" data-bitsy-radio-group-description>
One project and community support.
</p>
</div>
<div data-bitsy-radio-group-option>
<input id="plan-team" type="radio" name="plan" value="team" />
<label for="plan-team">Team</label>
</div>
<p id="plan-error" data-bitsy-radio-group-error>Choose a plan.</p>
</fieldset>Add data-bitsy-orientation="horizontal" for a wrapping row and data-bitsy-size="sm" for the compact size. Put aria-invalid="true" and the error id on the fieldset, never on one radio.
Variants and states
Use the arrow keys inside a group and Tab to leave it. Click a label to choose its option.
Foundation versus Bit
Raw radios stay native in the foundation, and a raw fieldset is a bordered panel. data-bitsy-radio-group removes the panel, draws the radio, and adds option layout, descriptions, orientation, and the group error. A boxed group is the Fieldset Bit's job, and large radio cards are a later Pattern built on this Bit.