Toggle switch

An on/off switch for immediate settings

For settings that take effect right away, like enabling dark mode or toggling a notification. The sliding thumb and check icon give clear visual feedback. Use Checkbox instead for options that need to be saved or submitted as part of a form.

Default

Compact

States

tsx
// From the npm package
import { ToggleSwitch } from 'rift-ds/components/ToggleSwitch/ToggleSwitch';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/toggle-switch.json