Switch

Pick a framework. Both use the same recipe, so the styling matches exactly.

Snow mode on

Switch props for React
Prop	Type	Description
checked	boolean	Current state. In Svelte it is bindable with bind:checked.
onCheckedChange	(checked: boolean) => void	Called after each toggle.
disabled	boolean	Blocks toggling and dims the control.

Also takes className and children. Anything else passes through to the button.

switch.demo.tsx

import { useState } from "react";
import { Switch } from "../react/index.js";

export default function SwitchDemo() {
  const [on, setOn] = useState(true);
  return (
    <div className="flex items-center gap-4">
      <label className="flex items-center gap-2 text-ink">
        <Switch checked={on} onCheckedChange={setOn} aria-label="Snow mode" />
        Snow mode {on ? "on" : "off"}
      </label>
      <Switch checked={false} disabled aria-label="Disabled switch" />
    </div>
  );
}

Snow mode on

Switch props for Svelte
Prop	Type	Description
checked	boolean	Current state. In Svelte it is bindable with bind:checked.
onCheckedChange	(checked: boolean) => void	Called after each toggle.
disabled	boolean	Blocks toggling and dims the control.

Also takes class and snippet children. Anything else passes through to the button.

switch.demo.svelte

<script lang="ts">
  import { Switch } from "../svelte/index.js";

  let on = $state(true);
</script>

<div class="flex items-center gap-4">
  <label class="flex items-center gap-2 text-ink">
    <Switch bind:checked={on} aria-label="Snow mode" />
    Snow mode {on ? "on" : "off"}
  </label>
  <Switch checked={false} disabled aria-label="Disabled switch" />
</div>