[Checkbox] Pass the native event as second argument of onCheckedChange

Hello all,

Feature request

onCheckedChange used to pass the native event, and is now passing a custom state for convenience (and the “indeterminate” state).

In our case we rely on react-hook-form to handle our forms lifecycle and validation, and it’s using the native events by default in order to synchronise the inputs values with the form’s global state : https://react-hook-form.com/api/useform/register

Not having access to the native event anymore will force us to pass a custom onChange functions to our checkboxes implemented with radix :

// Checkbox is our own implementation over Radix primitives
// setValue is also from react-hook-form
<Checkbox {...register("is_happy")} onChange={(checked) => { setValue("is_happy", checked); }} />

Overview

Passing the native event as a second argument of onCheckedChange would be helpful for interoperability.

Examples in other libraries

Who does this impact? Who is this for?

Additional context

[jjenzz]

@gpeto91 check out their Controller component.

Here’s a working example https://codesandbox.io/s/weathered-worker-huynj?file=/src/App.js

[s10mcow]

Im using the useController hook to gain access to the API of react-hook-form. The API is a little cleaner than using the <Controller/> HOC, imo.

For ex:

import {
  Control,  
  FieldValues,
  RegisterOptions,
} from 'react-hook-form';
const StyledCheckbox = styled(CheckboxPrimitive.Root)``
const StyledIndicator = styled(CheckboxPrimitive.Indicator)``
const CheckLabel = styled.label``
const CheckboxButtonGroupWrapper = styled.div``

export const ControlledCheckbox = ({
  name,
  control,
  children,
  rules,
}: {
  name: string;
  rules?: RegisterOptions;
  control: Control<FieldValues, null>;
  children: React.ReactNode;
}) => {
  const { field } = useController({ name, control, rules });

  return (
    <CheckboxButtonGroupWrapper>
      <CheckLabel>
        <StyledCheckbox
          {...field}
          value={undefined}
          checked={field.value}
          onCheckedChange={field.onChange}
        >
          <StyledIndicator>
            <CheckIcon />
          </StyledIndicator>
        </StyledCheckbox>
        {children}
      </CheckLabel>
    </CheckboxButtonGroupWrapper>
  );
};