Switch

On/off toggle built on Radix.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Switch } from "@aspyn-io/kit";

With label

Email notifications

<div className="flex items-center gap-2">
  <Switch id="notifications" defaultChecked />
  <Label htmlFor="notifications">Email notifications</Label>
</div>

Settings row pattern

Two-factor authentication

Require a code on every sign-in.

<div className="flex items-center justify-between rounded-lg border p-4">
  <div className="space-y-0.5">
    <Label htmlFor="2fa">Two-factor authentication</Label>
    <p className="text-sm text-muted-foreground">
      Require a code on every sign-in.
    </p>
  </div>
  <Switch id="2fa" />
</div>

Notes

Use Switch for settings that apply immediately; use Checkbox inside forms that submit.