fix: checkbox size, indeterminate and examples

Author: ivan-dalmet

app/components/ui/checkbox.stories.tsx

@@ -17,32 +17,48 @@ export const DefaultValue = () => {
   return <Checkbox defaultChecked>I love bears</Checkbox>;
 };
 
+export const Sizes = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Checkbox size="sm">I love bears</Checkbox>
+      <Checkbox>I love bears</Checkbox>
+      <Checkbox size="lg">I love bears</Checkbox>
+    </div>
+  );
+};
+
 export const Disabled = () => {
   return <Checkbox disabled>I love bears</Checkbox>;
 };
 
+export const Indeterminate = () => {
+  return <Checkbox indeterminate>I love bears</Checkbox>;
+};
+
 export const CustomCheckbox = () => {
   return (
-    <label className="relative flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-border p-4 transition-colors outline-none focus-within:ring-[3px] focus-within:ring-ring/50 hover:bg-muted/50 has-[&[data-checked]]:bg-primary/5">
+    <label className="relative flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-border p-4 transition-colors outline-none focus-within:ring-[3px] focus-within:ring-ring/50 hover:bg-muted/50 has-[:checked]:border-none has-[:checked]:bg-primary has-[:checked]:text-primary-foreground">
       <Checkbox
         noLabel
         render={(props, { checked }) => {
           return (
-            <div
+            <button
+              type="button"
               {...props}
               className="flex w-full justify-between outline-none"
             >
-              <div className="flex flex-col">
-                <span className="font-medium">I love bears</span>
-              </div>
-              <div
-                className={cn('rounded-full bg-primary p-1 opacity-0', {
-                  'opacity-100': checked,
-                })}
+              <span className="font-medium">I love bears</span>
+              <span
+                className={cn(
+                  'rounded-full bg-primary-foreground p-1 opacity-0',
+                  {
+                    'opacity-100': checked,
+                  }
+                )}
               >
-                <CheckIcon className="h-4 w-4 text-primary-foreground" />
-              </div>
-            </div>
+                <CheckIcon className="size-4 text-primary" />
+              </span>
+            </button>
           );
         }}
       />

app/components/ui/checkbox.tsx

@@ -1,22 +1,54 @@
 import { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';
-import { CheckIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { CheckIcon, MinusIcon } from 'lucide-react';
 import React from 'react';
 
 import { cn } from '@/lib/tailwind/utils';
 
+const labelVariants = cva('flex items-center gap-2.5 text-primary', {
+  variants: {
+    size: {
+      default: 'text-base',
+      sm: 'gap-2 text-sm',
+      lg: 'gap-3 text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+const checkboxVariants = cva(
+  'flex flex-none cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-indeterminate:border-primary/20 data-unchecked:border data-unchecked:border-primary/20',
+  {
+    variants: {
+      size: {
+        default: 'size-5 [&_svg]:size-3.5 [&_svg]:stroke-3',
+        sm: 'size-4 rounded-[5px] [&_svg]:size-2.5 [&_svg]:stroke-4',
+        lg: 'size-6 [&_svg]:size-4 [&_svg]:stroke-3',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
 export type CheckboxProps = Omit<CheckboxPrimitive.Root.Props, 'type'> & {
   /**
    * By default, the checkbox is wrapped in a `<label>`. Set to `false` if you do not want it.
    */
   noLabel?: boolean;
   labelProps?: React.ComponentProps<'label'>;
+  size?: 'default' | 'sm' | 'lg';
 };
 
 export function Checkbox({
   children,
   className,
   noLabel,
   labelProps,
+  size,
   ...props
 }: CheckboxProps) {
   const Comp = noLabel ? React.Fragment : 'label';
@@ -25,33 +57,27 @@ export function Checkbox({
     ? {}
     : {
         ...labelProps,
-        className: cn(
-          'flex items-center gap-2 text-base text-primary',
-          labelProps?.className
-        ),
+        className: cn(labelVariants({ size }), labelProps?.className),
       };
 
   return (
     <Comp {...compProps}>
       <CheckboxPrimitive.Root
-        className={cn(
-          'flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none',
-          'focus-visible:ring-[3px] focus-visible:ring-ring/50',
-          'data-checked:bg-primary data-unchecked:border data-unchecked:border-primary/50',
-          'disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20',
-          className
-        )}
+        className={cn(checkboxVariants({ size }), className)}
         {...props}
       >
         <CheckboxPrimitive.Indicator
           keepMounted={true}
           className={cn(
             'flex transition-transform duration-150 ease-in-out',
-            'data-checked:scale-100 data-checked:rotate-0 data-unchecked:invisible data-unchecked:scale-50 data-unchecked:rotate-45'
+            'data-checked:scale-100 data-unchecked:invisible data-unchecked:scale-75'
+          )}
+          render={(props, state) => (
+            <span {...props}>
+              {state.indeterminate ? <MinusIcon /> : <CheckIcon />}
+            </span>
           )}
-        >
-          <CheckIcon className="size-3.5 stroke-3 text-primary-foreground" />
-        </CheckboxPrimitive.Indicator>
+        />
       </CheckboxPrimitive.Root>
       {children}
     </Comp>