Switch

Edit the code — the preview updates live. Try changing props, text, or classes.

function Demo() {
  const [on, setOn] = useState(true)
  return (
    <label className="flex cursor-pointer items-center gap-3 text-sm text-fg">
      <Switch checked={on} onCheckedChange={setOn} />
      {on ? "Notifications on" : "Notifications off"}
    </label>
  )
}
render(<Demo />)

Copy the source into your project with the registry CLI:

Or install the package and import it:

Import Switch from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.