shadcn.io is not affiliated with official shadcn/ui

Shadcn Toggle for React and Tailwind

Two-state button that can be toggled on or off.

Installation

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

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

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

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

<Step>This component depends on Button. Install it first if you haven't already.</Step>

Install the following dependencies:

bun add @ark-ui/react tailwind-variants

pnpm add @ark-ui/react tailwind-variants

npm install @ark-ui/react tailwind-variants

yarn add @ark-ui/react tailwind-variants

Copy and paste the following code into your project.

components/ui/toggle.tsx

"use client";

import { Toggle as ArkToggle, useToggleContext } from "@ark-ui/react/toggle";
import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";

export const useToggle = useToggleContext;

export const toggleVariants = tv({
  base: [
    "relative",
    "data-[state=on]:bg-input/64 dark:data-[state=on]:bg-input/64",
    "pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11",
  ],
  variants: {
    size: {
      sm: "h-7 min-w-7 px-1.5",
      md: "h-8 min-w-8 px-2",
      lg: "h-9 min-w-9 px-2.5",
    },
  },
  defaultVariants: {
    size: "md",
  },
});

export interface ToggleProps
  extends React.ComponentProps<typeof ArkToggle.Root>,
    VariantProps<typeof toggleVariants> {
  /**
   * The variant of the toggle
   *
   * @default "outline"
   */
  variant?: Extract<
    VariantProps<typeof buttonVariants>["variant"],
    "outline" | "ghost"
  >;
}

export const Toggle = (props: ToggleProps) => {
  const { variant = "ghost", size = "md", className, ...rest } = props;

  return (
    <ArkToggle.Root
      className={cn(
        buttonVariants({ variant, clickEffect: false }),
        toggleVariants({ size }),
        className
      )}
      data-slot="toggle"
      {...rest}
    />
  );
};

export const ToggleIndicator = (
  props: React.ComponentProps<typeof ArkToggle.Indicator>
) => {
  const { children, ...rest } = props;

  return (
    <ArkToggle.Indicator
      className="flex items-center gap-2"
      data-slot="toggle-indicator"
      {...rest}
    >
      {children}
    </ArkToggle.Indicator>
  );
};

Update the import paths to match your project setup.

Usage

import { 
  Toggle,   
  ToggleIndicator 
} from "@/components/ui/toggle";

<Toggle>
  <ToggleIndicator />
</Toggle>

Controlled

Use the pressed and onPressedChange props to control the toggle state programmatically.

States

Disabled

Use the disabled prop to disable the toggle.

Variants

Default

Outline

Sizes

Small

Medium

Large

Examples

Icon Group

Use multiple toggles with icons for toolbar-style controls.

API Reference

Toggle

Toggle button for on/off or selected state. Use asChild for custom elements.

Prop	Type	Default
`variant`	`"outline" \| "ghost"`	`"ghost"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`pressed`	`boolean`	`-`
`defaultPressed`	`boolean`	`false`
`disabled`	`boolean`	`false`
`onPressedChange`	`(details: PressedChangeDetails) => void`	`-`
`className`	`string`	`-`
`asChild`	`boolean`	`false`

ToggleIndicator

Icon or indicator shown when toggle is active. Omitted when used as child.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

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

Toast

Toggle Group