Group of toggle buttons (single or multiple selection). Matches shadcn-svelte Toggle Group.
Toggle Group
Props: type (single|multiple), orientation (horizontal|vertical). Put Toggle components inside.
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
bashbash
npx rizzo-css add ToggleGroup
bashbash
pnpm dlx rizzo-css add ToggleGroup
bashbash
npx rizzo-css add ToggleGroup
bashbash
bunx rizzo-css add ToggleGroup
Live Example
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React
astroastro
---
import ToggleGroup from '../components/astro/ToggleGroup.astro';
import Toggle from '../components/astro/Toggle.astro';
---
<ToggleGroup type="single">
<Toggle ariaLabel="Left">Left</Toggle>
<Toggle pressed ariaLabel="Center">Center</Toggle>
<Toggle ariaLabel="Right">Right</Toggle>
</ToggleGroup>
htmlhtml
<!-- Rizzo CSS. BEM: toggle-group. Use .toggle and .toggle--pressed on buttons; manage aria-pressed and selection in JS. -->
<div class="toggle-group" role="group" aria-label="Alignment">
<button type="button" class="toggle" aria-pressed="false" aria-label="Left">Left</button>
<button type="button" class="toggle toggle--pressed" aria-pressed="true" aria-label="Center">Center</button>
<button type="button" class="toggle" aria-pressed="false" aria-label="Right">Right</button>
</div>
npm 
pnpm 
yarn 
bun