Toggle Group — Vanilla

Group of toggle buttons with vanilla HTML. Ensure Rizzo CSS is loaded.

Toggle Group

Group of toggles with no gap. Use toggle-group; add toggle-group--vertical for vertical. Wire single/multiple selection in JS if needed.

Add this component

The command below includes <strong>ToggleGroup</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<div class="toggle-group">
  <button type="button" class="toggle" aria-pressed="false">Left</button>
  <button type="button" class="toggle toggle--pressed" aria-pressed="true">Center</button>
  <button type="button" class="toggle" aria-pressed="false">Right</button>
</div>

<div class="toggle-group toggle-group--vertical" style="margin-top: 1rem;">
  <button type="button" class="toggle">A</button>
  <button type="button" class="toggle toggle--pressed" aria-pressed="true">B</button>
</div>

Other frameworks: Astro · Svelte · Vue · React