Switch — Vanilla

Toggle switch with vanilla HTML. Ensure Rizzo CSS is loaded.

Switch

On/off toggle. Use role="switch" and aria-checked on the checkbox. No script required for styling; state is driven by the checkbox. Wire change or input if you need to sync state elsewhere.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

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

npm pnpm yarn bun
Live example

HTML

html html 
<label class="switch">
  <input type="checkbox" class="switch__input" role="switch" aria-checked="false" />
  <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
  <span class="switch__label">Enable notifications</span>
</label>

Other frameworks: Astro · Svelte · Vue · React