Toggle for settings that apply immediately, with on, off, and disabled states.
$ npx context-ds add switchUse it for
Settings that apply at once.
Avoid
Dependencies: @radix-ui/react-switch
import { Label } from "@/components/ui/label";import { Switch } from "@/components/ui/switch";// On, off and disabled, each named by its label.export function Product() { return ( <div className="grid gap-4"> <div className="flex items-center gap-3"> <Switch id="switch-top-up" defaultChecked /> <Label htmlFor="switch-top-up">Auto top-up</Label> </div> <div className="flex items-center gap-3"> <Switch id="switch-digest" /> <Label htmlFor="switch-digest">Weekly usage email</Label> </div> <div className="flex items-center gap-3"> <Switch id="switch-sso" disabled /> <Label htmlFor="switch-sso">Require SSO</Label> </div> </div> );}"use client";import * as React from "react";import * as SwitchPrimitive from "@radix-ui/react-switch";import { cn } from "@/lib/utils";// The thumb sits 3/16 rem inside the track on every side, so it reads as held by the track. Off, a hairline gives the// pale track an edge; on, the brand blue needs none. Measured in rem so the travel scales with the root size.function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) { return ( <SwitchPrimitive.Root data-slot="switch" className={cn( "peer inline-flex h-5 w-9 shrink-0 items-center rounded-pill transition-[background-color,box-shadow] duration-200 ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=unchecked]:bg-neutral-10 data-[state=unchecked]:shadow-[inset_0_0_0_1px_var(--ds-color-wash-hover)] motion-reduce:transition-none", className, )} {...props} > <SwitchPrimitive.Thumb data-slot="switch-thumb" className="pointer-events-none block size-3.5 rounded-pill bg-white shadow-[0_1px_2px_rgb(0_0_0/0.12)] transition-transform duration-200 ease-out data-[state=checked]:translate-x-[1.1875rem] data-[state=unchecked]:translate-x-[0.1875rem] motion-reduce:transition-none" /> </SwitchPrimitive.Root> );}export { Switch };Reference: context-dashboard c0ddf7a src/components/ui/switch.tsx.