// Forms

Switch

A switch for toggling a binary state.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/switch

// Usage

1import { Switch } from "@/components/ui/switch";
2
3<Switch />

// Code

1"use client";
2
3import { Switch as ArkSwitch, useSwitchContext } from "@ark-ui/react/switch";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7export const useSwitch = useSwitchContext;
8
9export const Switch = (props: React.ComponentProps<typeof ArkSwitch.Root>) => {
10  const { className, tabIndex, ...rest } = props;
11
12  return (
13    <ArkSwitch.Root
14      className={cn(
15        "group/switch",
16        "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
17        "h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]",
18        "p-px",
19        "inline-flex shrink-0 items-center",
20        "rounded-full border border-transparent",
21        "transition-all",
22        "outline-none [[data-focus-visible],[data-invalid]]:ring-[3px]",
23        "data-focus-visible:border-primary data-focus-visible:ring-ring/32",
24        "data-invalid:border-destructive data-invalid:ring-destructive/24",
25        "dark:data-invalid:border-destructive-foreground dark:data-invalid:ring-destructive-foreground/20",
26        "data-[state=checked]:bg-primary",
27        "data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input",
28        "data-disabled:pointer-events-none data-disabled:opacity-64",

// Dependencies

@ark-ui/react