Switch.

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export default function SwitchDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <Switch id="sw-online" defaultChecked />
        <Label htmlFor="sw-online">Keep site online</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id="sw-disabled" disabled />
        <Label htmlFor="sw-disabled">Beta renderer</Label>
      </div>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add switch

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/switch. See Installation if your project is not set up yet.

Manually

1. Install the dependencies

   npm install radix-ui

2. Copy the source into your project

   components/ui/switch.tsx

   "use client";
   
   import * as React from "react";
   import { Switch as SwitchPrimitive } from "radix-ui";
   
   import { cn } from "@/lib/utils";
   
   function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
     return (
       <SwitchPrimitive.Root
         data-slot="switch"
         className={cn(
           "peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border border-input bg-secondary p-[2px] transition-[background-color,border-color,box-shadow] outline-none",
           "hover:border-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
           "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
       >
         <SwitchPrimitive.Thumb
           data-slot="switch-thumb"
           className="pointer-events-none block size-4 rounded-full bg-muted-foreground transition-transform data-[state=checked]:translate-x-[18px] rtl:data-[state=checked]:-translate-x-[18px] data-[state=checked]:bg-primary-foreground data-[state=unchecked]:translate-x-0"
         />
       </SwitchPrimitive.Root>
     );
   }
   
   export { Switch };

3. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

import { Switch } from "@/components/ui/switch";

<Switch id="online" defaultChecked />

Examples#

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

const settings = [
  { id: "sync", title: "Sync on boot", description: "Push local changes when the computer starts.", on: true },
  { id: "guestbook", title: "Open guestbook", description: "Let visitors leave a message on your site.", on: true },
  { id: "listed", title: "Directory listing", description: "Show the site on the Hub front page.", on: false },
  { id: "alerts", title: "Offline alerts", description: "Ping your chat box when the host goes down.", on: false },
];

export default function SwitchSettings() {
  return (
    <div className="w-full max-w-md divide-y rounded-lg border bg-card">
      {settings.map((s) => (
        <div key={s.id} className="flex items-center justify-between gap-4 p-4">
          <div className="grid gap-1">
            <Label htmlFor={`set-${s.id}`}>{s.title}</Label>
            <p id={`set-${s.id}-desc`} className="text-[13px] text-muted-foreground">
              {s.description}
            </p>
          </div>
          <Switch id={`set-${s.id}`} defaultChecked={s.on} aria-describedby={`set-${s.id}-desc`} />
        </div>
      ))}
    </div>
  );
}