Switch

This is a Switch component.

Notifications

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Switch Code

Copy Switch Code

Switch Props

Name	Type	Required	Default	Description
id	string	Yes	undefined	The unique identifier for the switch.
name	string	Yes	undefined	The name of the switch.
checked	boolean	Yes	false	Whether the switch is checked or not.
onChange	(event) => void	Yes	undefined	Callback function triggered when the switch state changes.
variant	"circle" \| "square"	No	"circle"	The shape of the switch (circle or square).
activeIcon	React.ReactNode	No	undefined	Icon to display when the switch is active.
inactiveIcon	React.ReactNode	No	undefined	Icon to display when the switch is inactive.
activeColor	string	No	"bg-green-500"	Background color when the switch is active.
inactiveColor	string	No	"bg-gray-300"	Background color when the switch is inactive.
className	string	No	""	Additional class names for custom styling.