Toggle group
Fuse several toggles into one segmented control, single- or multi-select.
Wrap two or more toggles in .toggle-group to fuse them
into one segmented control — the same border-collapse and inner-corner squaring as a
button group. Make it single-select by giving
the toggles radio inputs that share a name; make it multi-select with
checkbox inputs. Add role="group" and an aria-label so the set is announced.
Single select
Radios sharing a name — exactly one toggle stays on.
<div class="toggle-group" role="group" aria-label="Text alignment"> <label class="toggle" data-size="icon"> <input type="radio" name="align" aria-label="Align left" checked /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="4" y1="12" x2="14" y2="12" /> <line x1="4" y1="18" x2="18" y2="18" /> </svg> </label> <label class="toggle" data-size="icon"> <input type="radio" name="align" aria-label="Align center" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="7" y1="12" x2="17" y2="12" /> <line x1="5" y1="18" x2="19" y2="18" /> </svg> </label> <label class="toggle" data-size="icon"> <input type="radio" name="align" aria-label="Align right" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="10" y1="12" x2="20" y2="12" /> <line x1="6" y1="18" x2="20" y2="18" /> </svg> </label></div>Multi select
Checkboxes — any number can be on at once.
<div class="toggle-group" role="group" aria-label="Text formatting"> <label class="toggle"> <input type="checkbox" name="format" value="bold" checked /> <span>Bold</span> </label> <label class="toggle"> <input type="checkbox" name="format" value="italic" /> <span>Italic</span> </label> <label class="toggle"> <input type="checkbox" name="format" value="underline" checked /> <span>Underline</span> </label></div>Vertical
Set data-orientation="vertical" on the wrapper to stack them.
<div class="toggle-group" data-orientation="vertical" role="group" aria-label="Map layer"> <label class="toggle"> <input type="radio" name="layer" value="map" checked /> <span>Map</span> </label> <label class="toggle"> <input type="radio" name="layer" value="satellite" /> <span>Satellite</span> </label> <label class="toggle"> <input type="radio" name="layer" value="terrain" /> <span>Terrain</span> </label></div>API
| Attribute | Values |
|---|---|
data-orientation | vertical (omit = horizontal default) |
The group reads each child's own --toggle-radius, so the outer corners follow the
toggles' data-size automatically — only the inner corners are squared. You never
need to touch zazz/styles/.