Composite
Toggle Group Hybrid
Segmented control of 2–5 options. Pick exactly one (radio behavior) or any number (checkbox behavior). For text alignment, view modes, density toggles — anywhere a tight visual cluster beats a dropdown.
About
Overview
Toggle groups visually link related options into one control. Single mode is a stylized radio group ("Day | Week | Month"); multi mode is a stylized checkbox group ("Bold + Italic + Underline" all on at once).
Toggle Group vs Tabs. Tabs change which content panel is shown. Toggle Group changes a setting on the same content. If clicking changes what you see, it's Tabs. If clicking changes how it's filtered or rendered, it's a Toggle Group.
Live
Demo
<!-- Single (one selected at a time) -->
<div class="ren-toggle-group" role="radiogroup" aria-label="Time range">
<button role="radio" class="ren-toggle-item" aria-checked="true">Day</button>
<button role="radio" class="ren-toggle-item" aria-checked="false">Week</button>
<button role="radio" class="ren-toggle-item" aria-checked="false">Month</button>
</div>
<!-- Multi (any number selected) -->
<div class="ren-toggle-group" role="group" aria-label="Text format">
<button class="ren-toggle-item" aria-pressed="true">Bold</button>
<button class="ren-toggle-item" aria-pressed="false">Italic</button>
</div>Reference
API
| Class | Effect |
|---|---|
.ren-toggle-group | The container. Inline-flex row, items share borders, no gaps. Single rounded shape. |
.ren-toggle-item | One option. Always a real <button type="button">. Selected state via aria-checked="true" (radio mode) or aria-pressed="true" (multi mode). |
Inclusive by default
Accessibility
- Single mode: wrap in
role="radiogroup"; items userole="radio"+aria-checked. Arrow keys move selection. - Multi mode: wrap in
role="group"; items use plainaria-pressed. Tab moves between, Space toggles each. - Always pair the group with
aria-labelor a visible label outside.