@radix-ui/react-checkbox with Tailwind in Storyboard.js: how to check-uncheck on actual click?

[dsign-phil]

Been a while since I was last frontend-working, so I must be missing something trivial & obvious... the issue: in Storybook when I toggle the checked Control, the Radix Checkbox shows the tick-mark alright, but just clicking itself, nothing happens or changes.

With the checked Control toggled on, OK:

But as said, no checked-unchecked change on checkbox click. What am I missing in these such that a click performs a check-uncheck?

• checkbox.stories.tsx:

import type { Meta, StoryObj } from '@storybook/react';
import { Checkbox } from './checkbox';

const meta: Meta<typeof Checkbox> = {
  component: Checkbox,
  argTypes: {
    variant: {
      options: ['default'],
      control: {
        type: 'select',
      },
    },
    disabled: {
      control: 'boolean',
    },
    checked: {
      control: 'boolean',
    },
  },
};
export default meta;
type Story = StoryObj<typeof Checkbox>;

export const Default: Story = {
  args: {
    variant: 'default',
    size: 'default',
    disabled: false,
    checked: false,
  },
  render: (props, ctx) => (
    <form>
      <Checkbox {...props}>{ctx.name}</Checkbox>
    </form>
  ),
};

• checkbox.tsx:

'use client';

import * as React from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { CheckIcon } from 'lucide-react';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const checkboxVariants = cva(['rounded-sm'], {
  variants: {
    variant: {
      default: [
        'bg-white border-slate-900 border-2',
        'data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-400 data-[state=checked]:text-white',
        'hover:bg-blue-500 hover:data-[state=checked]:bg-blue-400 hover:data-[state=checked]:border-blue-500',
        'disabled:bg-slate-200 disabled:border-slate-400 disabled:text-slate-400 disabled:data-[state=checked]:bg-slate-200 disabled:data-[state=checked]:border-slate-400 disabled:data-[state=checked]:text-slate-400',
      ],
    },
    size: {
      default: 'w-6 h-6',
    },
  },
  defaultVariants: {
    variant: 'default',
    size: 'default',
  },
});

export interface CheckboxProps
  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,
    VariantProps<typeof checkboxVariants> {}

function Checkbox({ className, variant, size, ...props }: CheckboxProps) {
  const [checked, setChecked] = React.useState(props.checked ?? false);
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      checked={checked}
      onCheckedChange={(checked: CheckboxPrimitive.CheckedState) => {
        // alert(checked); // note: this DOES trigger on click and shouts the correct state!
        setChecked(checked);
      }}
      className={cn(checkboxVariants({ variant, size, className }))}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
}

export { Checkbox, checkboxVariants };

(Note that I only put in that onCheckedChange handler to diagnose, tho I'm assuming it ultimately won't even be required for the checkbox to work as expected.)

[dsign-phil]

Turns out, putting {...props} first before checked etc solves this =)