Toggle Group
A group of mutually exclusive or independent toggle buttons, built with
<label class="toggle"> inside a
<fieldset role="group">.
Default
Use radio inputs for mutually exclusive options.
<fieldset role="group">
<label class="toggle square" aria-label="Align left">
<input type="radio" name="align" />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align center">
<input type="radio" name="align" checked />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align right">
<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">
<input type="radio" name="align" />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align center">
<input type="radio" name="align" checked />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Align right">
<input type="radio" name="align" />
<svg>...</svg>
</label>
</fieldset>
<fieldset role="group">
<label class="toggle square" aria-label="Bold">
<input type="checkbox" />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Italic">
<input type="checkbox" checked />
<svg>...</svg>
</label>
<label class="toggle square" aria-label="Underline">
<input type="checkbox" />
<svg>...</svg>
</label>
</fieldset>
</div>