A group of mutually exclusive or independent toggle buttons, built
with
<label class="toggle"> inside a
<fieldset role="group">.
Composed of
Button Group- The fieldset that joins the toggles
Toggle- Each option in the group
Default
Use radio inputs for mutually exclusive options.
<fieldset role="group">
<label class="toggle square" aria-label="Align left" data-tooltip>
<input type="radio" name="align" />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align center" data-tooltip>
<input type="radio" name="align" checked />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align right" data-tooltip>
<input type="radio" name="align" />
<svg>...</svg>
</label>
</fieldset>Multiple groups
Place groups next to each other to build toolbar-style layouts. Use checkboxes for independent toggles.
<div style="display: flex; gap: 0.5rem">
<fieldset role="group">
<label class="toggle square" aria-label="Align left" data-tooltip>
<input type="radio" name="align" />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align center" data-tooltip>
<input type="radio" name="align" checked />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align right" data-tooltip>
<input type="radio" name="align" />
<svg>...</svg>
</label>
</fieldset>
<fieldset role="group">
<label class="toggle square" aria-label="Bold" data-tooltip>
<input type="checkbox" />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Italic" data-tooltip>
<input type="checkbox" checked />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Underline" data-tooltip>
<input type="checkbox" />
<svg>...</svg>
</label>
</fieldset>
</div>