shadcn.io is not affiliated with official shadcn/ui

Shadcn Switch for React and Tailwind

A switch for toggling a binary state.

Airplane mode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/switch.json

pnpm dlx shadcn@latest add https://kit.dev/r/switch.json

npx shadcn@latest add https://kit.dev/r/switch.json

yarn shadcn@latest add https://kit.dev/r/switch.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/switch.tsx

"use client";

import { Switch as ArkSwitch, useSwitchContext } from "@ark-ui/react/switch";
import type React from "react";
import { cn } from "@/lib/utils";

export const useSwitch = useSwitchContext;

export const Switch = (props: React.ComponentProps<typeof ArkSwitch.Root>) => {
  const { className, tabIndex, ...rest } = props;

  return (
    <ArkSwitch.Root
      className={cn(
        "group/switch",
        "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
        "h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]",
        "p-px",
        "inline-flex shrink-0 items-center",
        "rounded-full border border-transparent",
        "transition-all",
        "outline-none [[data-focus-visible],[data-invalid]]:ring-[3px]",
        "data-focus-visible:border-primary data-focus-visible:ring-ring/32",
        "data-invalid:border-destructive data-invalid:ring-destructive/24",
        "dark:data-invalid:border-destructive-foreground dark:data-invalid:ring-destructive-foreground/20",
        "data-[state=checked]:bg-primary",
        "data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input",
        "data-disabled:pointer-events-none data-disabled:opacity-64",
        "motion-reduce:transition-none!",
        className
      )}
      data-slot="switch"
      {...rest}
    >
      <ArkSwitch.Control
        className="flex size-full items-center"
        data-slot="switch-control"
      >
        <ArkSwitch.Thumb
          className={cn(
            "block",
            "aspect-square h-full w-auto",
            "bg-background",
            "rounded-full ring-0",
            "pointer-events-none",
            "transition-transform",
            "data-[state=checked]:translate-x-[calc(var(--thumb-size)-4px)]",
            "dark:data-[state=checked]:bg-primary-foreground",
            "data-[state=unchecked]:translate-x-0",
            "dark:data-[state=unchecked]:bg-foreground",
            "motion-reduce:transition-none!"
          )}
          data-slot="switch-thumb"
        />
      </ArkSwitch.Control>

      <ArkSwitch.HiddenInput tabIndex={tabIndex} />
    </ArkSwitch.Root>
  );
};

Update the import paths to match your project setup.

Usage

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

<Switch />

Controlled

Use the checked and onCheckedChange props to control the switch state programmatically.

States

Invalid

Use the invalid prop on the Field or in the Switch component to mark the switch as invalid.

Examples

Disabled

Use the disabled prop to disable the switch.

With Description

Use FieldDescription to add a description to the switch.

Card Style

Use a card-style layout with the switch for a more prominent display.

Form Integration

Integrate the switch into a form with proper validation and error handling.

Customizing Size

The switch size is controlled by the [--size-*] CSS variable.

API Reference

Switch

Toggle switch for on/off state. Use with a form control.

Prop	Type	Default
`checked`	`boolean`	`-`
`defaultChecked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`
`name`	`string`	`-`
`value`	`string \| number`	`"on"`
`onCheckedChange`	`(details: CheckedChangeDetails) => void`	`-`
`className`	`string`	`-`

Attribute	Default
`--size`	`--spacing(4)`

For a complete list of props, see the Ark UI documentation.

Steps

Table