Radio Group
The radio group picks exactly one option from a set, like a plan or a shipping method. For on/off settings, reach for the checkbox or switch.
<div class="field-group gap-3" role="radiogroup" aria-label="Density">
<div class="field field-horizontal">
<input type="radio" class="radio" id="r1" name="density" value="default" />
<label class="label" for="r1">Default</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="r2" name="density" value="comfortable" checked />
<label class="label" for="r2">Comfortable</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="r3" name="density" value="compact" />
<label class="label" for="r3">Compact</label>
</div>
</div>Usage
Add the radio class to each <input type="radio"> and give the set a shared name. Lay each option out with its label in a horizontal field, and give the group an accessible name: a field-set with a legend, or role="radiogroup" with an aria-label.
<div class="field field-horizontal">
<input type="radio" class="radio" id="option-1" name="my-group" />
<label class="label" for="option-1">Option one</label>
</div>Examples
Description
Give options supporting text with field-content.
<div class="field-group gap-3" role="radiogroup" aria-label="Density">
<div class="field field-horizontal">
<input type="radio" class="radio" id="desc-r1" name="desc-density" value="default" />
<div class="field-content">
<label class="label" for="desc-r1">Default</label>
<p class="field-description">Standard spacing for most use cases.</p>
</div>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="desc-r2" name="desc-density" value="comfortable" checked />
<div class="field-content">
<label class="label" for="desc-r2">Comfortable</label>
<p class="field-description">More space between elements.</p>
</div>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="desc-r3" name="desc-density" value="compact" />
<div class="field-content">
<label class="label" for="desc-r3">Compact</label>
<p class="field-description">Minimal spacing for dense layouts.</p>
</div>
</div>
</div>Choice card
Wrap each option in a label and the whole card becomes clickable, tinting itself while checked.
<div class="field-group gap-3" role="radiogroup" aria-label="Plan">
<label class="label" for="plus-plan">
<div class="field field-horizontal">
<div class="field-content">
<span class="field-title">Plus</span>
<p class="field-description">For individuals and small teams.</p>
</div>
<input type="radio" class="radio" id="plus-plan" name="plan" value="plus" checked />
</div>
</label>
<label class="label" for="pro-plan">
<div class="field field-horizontal">
<div class="field-content">
<span class="field-title">Pro</span>
<p class="field-description">For growing businesses.</p>
</div>
<input type="radio" class="radio" id="pro-plan" name="plan" value="pro" />
</div>
</label>
<label class="label" for="enterprise-plan">
<div class="field field-horizontal">
<div class="field-content">
<span class="field-title">Enterprise</span>
<p class="field-description">For large teams and enterprises.</p>
</div>
<input type="radio" class="radio" id="enterprise-plan" name="plan" value="enterprise" />
</div>
</label>
</div>Fieldset
Wrap the group in a field set with a legend so it is announced together.
<fieldset class="field-set">
<legend class="field-legend field-legend-label">Subscription Plan</legend>
<p class="field-description">Yearly and lifetime plans offer significant savings.</p>
<div class="field-group gap-3">
<div class="field field-horizontal">
<input type="radio" class="radio" id="plan-monthly" name="sub-plan" checked />
<label class="label font-normal" for="plan-monthly">Monthly ($9.99/month)</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="plan-yearly" name="sub-plan" />
<label class="label font-normal" for="plan-yearly">Yearly ($99.99/year)</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="plan-lifetime" name="sub-plan" />
<label class="label font-normal" for="plan-lifetime">Lifetime ($299.99)</label>
</div>
</div>
</fieldset>Disabled
Add disabled to an option and its label dims with it.
<div class="field-group gap-3" role="radiogroup" aria-label="Options">
<div class="field field-horizontal">
<input type="radio" class="radio" id="disabled-1" name="disabled-group" disabled />
<label class="label font-normal" for="disabled-1">Disabled</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="disabled-2" name="disabled-group" checked />
<label class="label font-normal" for="disabled-2">Option 2</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="disabled-3" name="disabled-group" />
<label class="label font-normal" for="disabled-3">Option 3</label>
</div>
</div>Invalid
Set aria-invalid on the radios for the error state.
<fieldset class="field-set">
<legend class="field-legend field-legend-label">Notification Preferences</legend>
<p class="field-description">Choose how you want to receive notifications.</p>
<div class="field-group gap-3">
<div class="field field-horizontal">
<input type="radio" class="radio" id="invalid-email" name="invalid-notifications" checked aria-invalid="true" />
<label class="label font-normal" for="invalid-email">Email only</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="invalid-sms" name="invalid-notifications" aria-invalid="true" />
<label class="label font-normal" for="invalid-sms">SMS only</label>
</div>
<div class="field field-horizontal">
<input type="radio" class="radio" id="invalid-both" name="invalid-notifications" aria-invalid="true" />
<label class="label font-normal" for="invalid-both">Both Email & SMS</label>
</div>
</div>
</fieldset>