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) -->
<ren-toggle-group type="single" value="day" role="group" aria-label="Time range">
<button class="ren-toggle-group-item" type="button" data-value="day">Day</button>
<button class="ren-toggle-group-item" type="button" data-value="week">Week</button>
<button class="ren-toggle-group-item" type="button" data-value="month">Month</button>
</ren-toggle-group>
<!-- Multi (any number selected) -->
<ren-toggle-group type="multiple" role="group" aria-label="Text format">
<button class="ren-toggle-group-item" type="button" data-value="bold">Bold</button>
<button class="ren-toggle-group-item" type="button" data-value="italic">Italic</button>
</ren-toggle-group>Reference
API
| Class | Effect |
|---|---|
.ren-toggle-group | The container styling. Added to <ren-toggle-group> by the component. Inline-flex row, items share borders, no gaps. Single rounded shape. |
.ren-toggle-group-item | One option. Always a real <button type="button"> with a data-value. Selected state is aria-pressed="true", written by the component — never by hand. |
Web Component attributes
| Attribute | Type | Default | Notes |
|---|---|---|---|
type | "single" | "multiple" | "single" | Single clears the other items; multiple toggles each independently. |
value | string | — | Initial data-value to press (single mode). Also a property; the host fires ren-toggle-change. |
Inclusive by default
Accessibility
- Items are buttons in both modes: the component gives each one
role="button"and anaria-pressedit keeps in sync —type="single"clears the others,type="multiple"toggles each independently. - Roving tabindex: Tab enters the group once, then ← → ↑ ↓ move focus between items (wrapping) and Space / Enter activate the focused one.
- Always pair the group with
role="group"+aria-label, or a visible label outside. - Icon-only items need an
aria-label; the pressed state is carried by background and weight, never colour alone.