Form

Slide Toggle

On/off switch with a sliding thumb.

Preview

components/ui/slide-toggle.tsx

States

Install

pnpm dlx shadcn@latest add @rhythmic-ui/slide-toggle

Slide Toggle API

A switch with checked/defaultChecked + onCheckedChange. 48x24 pill track, brand green when on.

<SlideToggle defaultChecked aria-label="Notifications" />

<SlideToggle
  checked={enabled}
  onCheckedChange={setEnabled}
  aria-label="Marketing emails"
/>

<SlideToggle disabled aria-label="Locked setting" />

Registry URL

Use through the configured namespace in consumer repos.

https://design.dev.rhythmic.io/r/slide-toggle.json