Switch
A control that allows the user to toggle between checked and not checked.
Installation
Install the following dependencies:
npm install @radix-ui/react-switchCopy and paste the following code into your project.
'use client';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import clsx from 'clsx';
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
import styles from './styles.module.scss';
const Switch = forwardRef<
ElementRef<typeof SwitchPrimitives.Root>,
ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root className={clsx(styles.switch, className)} {...props} ref={ref}>
<SwitchPrimitives.Thumb className={clsx(styles.switch__thumb)} />
</SwitchPrimitives.Root>
));
Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch };Update the import paths to match your project setup.
Usage
import { Switch } from '@/components/ui/switch';<Switch />