[bug]: Checkbox unintentional movement

[Ehlfons]

Describe the bug

If you want to use the checkbox component alone, (without div and label) probably u don't want a div as father, and without that div with flex class when u click on the checkbox it moves to up and down.

To fix that u only need put 'flex' class on the CheckboxPrimitive.Root component

Affected component/components

Checkbox

How to reproduce

Using the component like that:

Accept terms and conditions

export default CheckboxDemo;

How to fix

const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef

(({ className, ...props }, ref) => ( <CheckboxPrimitive.Root ref={ref} className={cn( "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex", className )} {...props}

<CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}

</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Root> )) Checkbox.displayName = CheckboxPrimitive.Root.displayName

System Info

Windows, Firefox / Chrome

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[doomedramen]

for readability.

import React from 'react';
import { CheckboxPrimitive } from '@radix-ui/react-checkbox'; // Adjust import based on your actual usage
import { cn } from 'classnames'; // Adjust import based on your actual usage
import { Check } from 'react-icons/check'; // Adjust import based on your actual usage

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>, 
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
));

Checkbox.displayName = 'Checkbox'; // Optional: provide a displayName if needed

export default Checkbox;