Make radix checkbox work with RHF register

[norman-ags]

Overview

I noticed radix-checkbox component doesn't work with RHF register. It doesn't work because it's expecting ref.current.checked (just like a native HTML input)

<CheckboxPrimitive.Root {...register("accepted")} />

Saw this issue in github: #734

I think using onCheckedChange={field.onChange} should be a secondary option. IMO, a "CustomCheckbox" should be close to native HTML as possible. With that said I think the ref should have checked property.

const ref = useRef();

console.log(ref.current.checked) // true or false

<CheckboxPrimitive.Root ref={ref} />

This is just my opinion and if radix team think this is also correct, I'm happy to help/do a PR for this.

[ctjhoa]

I completely agree on this and for the record the issue is not limited to RHF.
@tanstack/table is also impacted via RowSelection api where it expects something like

onChange={table.getToggleAllRowsSelectedHandler()}

With Radix, you cannot use this method because onChange is never triggered.
You also cannot use onCheckedChange={table.getToggleAllRowsSelectedHandler()} because getToggleAllRowsSelectedHandler expect an event.

The workaround is to use something like

            onCheckedChange={(checked) => {
              if (checked === 'indeterminate') {
                return
              }
              table.toggleAllRowsSelected(checked)
            }}

This is very complicated / weird for something like a checkbox, where you expect to behave like native HTML

source: https://github.com/TanStack/table/blob/4e2dd61e620fd4b7114f8d1028c3f36e228993a3/packages/table-core/src/features/RowSelection.ts#L457

[paolostyle]

Bumping this as it's a big pain point for me as well. Also willing to contribute if there's an interest from the maintainers.

[madfcat]

+100 for that. We need ref on Checkboxes, please.
Not sure how to get validation work without ref using zod + react-hook-forms + radix-ui Checkbox at the moment.

[aladinyo]

The core reason Radix’s <Checkbox /> doesn’t work with register() in React Hook Form is not a usage bug in RHF but a limitation in the Radix implementation.

React Hook Form’s register("fieldName") expects the underlying element’s ref.current.checked property to reflect its checked state, just like a native <input type="checkbox">. The current Radix primitive doesn’t forward the ref to the native input element with the checked property, so ref.current.checked is not available for RHF to read. That’s why <Checkbox {...register("accepted")} /> doesn’t work — RHF sees a button-like element, not an input it can inspect via ref.current.checked.

here's a workaround that allows you to use Radix ui Checkbox with RHF:

// example of RHF, you need to pull the setValue method
const { register, handleSubmit, setValue, formState: { errors, isSubmitting } } = useForm<AuthSchema>();

// this is a method that will be passed to onCheckChange of Radix ui Checkbox, it will allow us to set the value of RHF checkbox input
const setCheckBoxValue = (checked: boolean | "indeterminate") => {
  setValue("accepted", Boolean(checked));
};

// create a fake input which is hidden (display: none), but use it to track the checked status of Radix ui Checkbox
<input type="checkbox" {...register("accepted")} className="hidden" />

// pass the setCheckBoxValue to onCheckedChange to keep RHF checkbox field updated
<CheckboxPrimitive.Root onCheckedChange={setCheckBoxValue} className="mr-2" />

Instead of relying on register() hooking directly into the Radix component, this:

• Keeps a real hidden native registered with React Hook Form
  This ensures RHF can read and submit a real boolean value, and Zod validation works as expected.

• Uses the visible Radix purely for UI, and manually synchronizes its state to the hidden input via setValue():

This pattern works because:

• The native supplies the boolean value that RHF/Zod needs.

• The Radix UI component drives the UX without being directly registered.

• No custom Controller wrapper is required.

check out this to see the official documentation of onCheckedChange property of Radix ui CheckboxPrimitive.Root element: https://www.radix-ui.com/primitives/docs/components/checkbox#root