Docs·Toggle

Toggle

A compact on/off switch with accent-state color and an elastic spring thumb.

Installation

$pnpm dlx shadcn@latest add @spiderui/toggle

Usage

API Reference

PropTypeDefault
checkedControlled on/off state.
boolean—
defaultCheckedInitial state when uncontrolled.
booleanfalse
onCheckedChangeCalled when the state changes.
(checked: boolean) => void—
accentColorCSS color used for the active track, including hex, rgb, hsl, oklch, or CSS variables.
React.CSSProperties['backgroundColor']"var(--primary)"
sizeTrack and thumb size.
"sm" | "default" | "lg""default"
disabledPrevents interaction and dims the control.
booleanfalse

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Notifications on

import { Toggle } from "@/components/ui/toggle"
export function NotificationsToggle() {
  const [enabled, setEnabled] = useState(true)

  return (
    <Toggle
      checked={enabled}
      onCheckedChange={setEnabled}
      accentColor="#10b981"
      aria-label="Enable notifications"
    />
  )
}