Adding sizing options to Switch component(just like Button component)

[navid-az]

Shadcn's Button component has an option to chose between different sizes. i want to do the same with Switch component.
what is the best approach to achieve this.

I've tried to add variants just like Button component both for switch root and switch thumb:

const switchVariants = cva(
  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-primary p-[2px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-soft-blue rtl:flex-row-reverse",
  {
    variants: {
      size: {
        default: "h-6 w-11",
        sm: "h-7 w-14",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
);
const thumbVariants = cva(
  "pointer-events-none block rounded-full shadow-lg ring-0 transition-all data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground data-[state=unchecked]:bg-primary",
  {
    variants: {
      size: {
        default: "h-10 w-10",
        sm: "h-5 w-5 data-[state=checked]:translate-x-7",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
);

but I'm not sure how to add these variants to the switch component.
is this event the right way to do this?
or should i just create another switch component and add shadcn's switch as a child?

something like this:

const NewSwitch=({size})=>{
return <Switch className=`&{size=='sm'?'w-5':'w-10'}`></Switch>
}

[guizmo]

Try this component, i only worked on the size, you will need to do the same for "variant"

<Switch size={"sm"} checked />

import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";

import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";

const switchVariants = cva(
  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
  {
    variants: {
      variant: {
        default: "bg-primary hover:bg-primary/90",
        destructive: "bg-destructive hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        secondary: "bg-secondary hover:bg-secondary/80",
      },
      size: {
        default: "h-6 w-11",
        sm: "h-4.5 w-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface SwitchProps
  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
    VariantProps<typeof switchVariants> {}

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  SwitchProps
>(({ className, variant, size, ...props }, ref) => {
  const notchSize = size === "sm" ? "size-4" : "size-5";
  const notchPosition =
    size === "sm"
      ? "data-[state=checked]:translate-x-3"
      : "data-[state=checked]:translate-x-5";
  return (
    <SwitchPrimitives.Root
      className={cn(switchVariants({ variant, size }), className)}
      {...props}
      ref={ref}
    >
      <SwitchPrimitives.Thumb
        className={cn(
          "pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
          notchSize,
          notchPosition
        )}
      />
    </SwitchPrimitives.Root>
  );
});
Switch.displayName = SwitchPrimitives.Root.displayName;

export { Switch };

[lavizp]

This is amazing

[Krishnamodi03]

I think this might work.

import * as SwitchPrimitives from '@radix-ui/react-switch';

import { cn } from '@/lib/utils';
import { cva } from 'class-variance-authority';

const switchVariants = cva(
  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
  {
    variants: {
      variant: {
        default: 'bg-primary hover:bg-primary/90',
        destructive: 'bg-destructive hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent',
        secondary: 'bg-secondary hover:bg-secondary/80',
      },
      size: {
        default: 'h-6 w-11',
        sm: 'h-4.5 w-8',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
);

const Switch = React.forwardRef((props, ref) => {
  const { className, variant, size, ...rest } = props;
  const notchSize = size === 'sm' ? 'size-4' : 'size-5';
  const notchPosition =
    size === 'sm'
      ? 'data-[state=checked]:translate-x-3'
      : 'data-[state=checked]:translate-x-5';
  return (
    <SwitchPrimitives.Root
      className={cn(switchVariants({ variant, size }), className)}
      {...rest}
      ref={ref}
    >
      <SwitchPrimitives.Thumb
        className={cn(
          'pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0',
          notchSize,
          notchPosition,
        )}
      />
    </SwitchPrimitives.Root>
  );
});

Switch.displayName = SwitchPrimitives.Root.displayName;

export { Switch };

Use :

<Switch size="sm"/>

[mostafaegouda]

Hey guys, I have opened a pr #7930 that improves the switch component sizing flexibility and can help with adding a size prop.