Created
January 27, 2024 06:48
-
-
Save kachar/6b02e257593576823a09f83c7646431f to your computer and use it in GitHub Desktop.
shadcn switch with different sizes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use client' | |
import type { VariantProps } from 'class-variance-authority' | |
import * as React from 'react' | |
import * as SwitchPrimitives from '@radix-ui/react-switch' | |
import { cva } from 'class-variance-authority' | |
import { cn } from '@/lib/utils' | |
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: { | |
size: { | |
default: 'h-6 w-11', | |
sm: 'h-4 w-7', | |
}, | |
}, | |
defaultVariants: { | |
size: 'default', | |
}, | |
}, | |
) | |
const switchThumbVariants = cva( | |
'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0', | |
{ | |
variants: { | |
size: { | |
default: 'h-5 w-5 data-[state=checked]:translate-x-5', | |
sm: 'h-3 w-3 data-[state=checked]:translate-x-3', | |
}, | |
}, | |
defaultVariants: { | |
size: 'default', | |
}, | |
}, | |
) | |
const Switch = React.forwardRef< | |
React.ElementRef<typeof SwitchPrimitives.Root>, | |
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & VariantProps<typeof switchVariants> | |
>(({ className, size, ...props }, ref) => ( | |
<SwitchPrimitives.Root className={cn(switchVariants({ size }), className)} {...props} ref={ref}> | |
<SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))} /> | |
</SwitchPrimitives.Root> | |
)) | |
Switch.displayName = SwitchPrimitives.Root.displayName | |
export { Switch } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment