Checkbox forwarded Ref should set on Input field and not Button

[emadabdulrahim]

I tried using Checkbox and pass it a ref, but it seems like the ref is being set on the Button element and not the actual input element itself. This means any library expecting to access the native Input event will not work properly.

I believe the Ref should be set on the hidden input element itself.

primitives/packages/react/checkbox/src/Checkbox.tsx

Line 76 in c553b2f

ref={composedRefs}

[jjenzz]

This is intentional because the Checkbox is a button so you will get a button. The input is only rendered when it is used within a form in order to propagate events. If it wasn't for that necessity, we wouldn't render one at all.

Would you mind helping us understand why you need a reference to an input, what is your use-case?

[cereallarceny]

Thanks so much for sharing @ozzyfromspace , I'll check it out!

[ozzyfromspace]

@cereallarceny my pleasure. Best wishes with your code

[jjenzz]

@benoitgrelard it'd be really great if Radix wrote a blog post or something on why we used button for checkbox. there is good reason (which Radix are aware of internally) but this gets raised a lot.

Is this worth a refactor PR? I'm willing to redo the checkbox with a standard input without changing the current API surface if that sounds reasonable. If not that's understandable.

@ozzyfromspace i would say no. tmk, refactoring it to match the current API and DX requirements is not possible. one of the main requirements being that consumers should not need to use peer-checked or input + .indicator selectors etc. to style the indicator.

a rule of thumb with Radix is that you should only interface with the public API (the component props) because it will not incur breaking changes. anything that the component renders is considered private—an implementation detail—which could change at any time so it's best to avoid targetting anything that relies on the component output/DOM structure (e.g. input + .indicator) if you want to avoid breaking changes.

[emadabdulrahim]

Another challenge with Radix Checkbox is that onCheckedChange doesn't pass input event. This introduces all sorts of issues. For example, to add multi-select functionality (like in Gmail), you need access to event to see if shift key is pressed.

[enix79]

anything that the component renders is considered private—an implementation detail—which could change at any time

@jjenzz, I don't think that the input will disappear any time. So why is it an issue, when you expose the input's ref and make it public? How should we integrate it with RHF?

And what is the "good reason" for using a button? I like Radix UI, but there should be an explanation of the whys. Sometimes I don't have to style the components too heavily, but still need them to be accessible. So if this reason is only about the styling thing, but not the accessibility thing, I would like to know that.

[equinusocio]

This is still a huge limitation, because you can only fix this when you have direct access to the components. Many libraries, like react-table, expect a real input element with native API. Using those fake inputs leads into type errors, since is not rendered inside a form.

[ryanmr]

I ran into this issue today with react-hook-form and the radix checkbox. It's a seriously unfortunate shortcoming. @swernerx thanks for the link to the mui example. I looked at the more complex checkbox code in radix. Not sure where to go from there.

[ozzyfromspace]

@ryanmr I would imagine when radix first tackled the checkbox, it was notoriously hard to style, so they went with a button implementation.

However, since 2017, basically all browsers have supported the css property "appearance" which when set to "none" removes all browser agent styles on the element and makes it easy for you to work with.

With this in mind, I recommend just using a simple <input type="checkbox" /> and setting your classes appropriately (e.g. in tailwind, class="appearance-none OTHER_CLASSES")

If you use a native input element of type checkbox, and ensure "appearance: none;" is set in your css, everything "just works" with react hook form.

I'm working on a local govt. website and this is our solution. I still love and use radix for other things, just not the checkbox, and that's okay.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

[ozzyfromspace]

@swernerx ideally the radix checkbox would just use the html input element under the hood

[plam-ml]

Ran into this. I solved this using the hook controller component

import { type ComponentProps, type ReactNode, forwardRef } from 'react';
import { Controller, useFormContext } from 'react-hook-form';

import { Checkbox } from './Checkbox';

type CheckboxFieldProps = {
    name: string;
    label: ReactNode;
} & Omit<ComponentProps<'button'>, 'ref'>;

// eslint-disable-next-line react/display-name
export const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
    ({ label, name, ...props }, forwardedRef) => {
        const { control } = useFormContext();
        return (
            <Controller
                control={control}
                name={name}
                render={({ field: { onChange, name, value } }) => (
                    <Checkbox
                        label={label}
                        onCheckedChange={onChange}
                        name={name}
                        checked={value}
                        ref={forwardedRef}
                        {...props}
                    />
                )}
            />
        );
    },
);

[enix79]

@plam-ml - how does it solve the problem? If your "Checkbox" uses Radix UI Checkbox, your forwardedRef will be the button ref, not the input ref.

[ks-himanshub]

Actually in my case everything is working fine but I am using this WAVE extension (available in chrome web store),

Which say that a an input element must have a label,

But in case of radix when we use checkbox inside a form tag a input element is rendered but we can't set any attribute to that element (input - rendered inside checkbox)

[ks-himanshub]

https://wave.webaim.org/

[nzwnabdulwahid]

I am having the same issue right now, are you able to solve this @ks-himanshub ?

[nuxcodes]

The input element is invisible but has a size attribute. This creates a weird focus ring on a Checkbox placed inside a form element.

@jjenzz Any ideas? Thanks.

[jjenzz]

@benoit i have noticed some issues with the input positioning myself separately. maybe it's worth having an issue to look into all this? if i recall, the intention was for the input to overlay the fake one only so that the native validation popover is aligned correctly.

CleanShot.2023-04-21.at.14.15.11.mp4

[benoitgrelard]

Weird…

We wrote this over 2 years ago:

primitives/packages/react/checkbox/src/Checkbox.tsx

Lines 112 to 115 in 45069f8

	// We transform because the input is absolutely positioned but we have
	// rendered it **after** the button. This pulls it back to sit on top
	// of the button.
	style={{ transform: 'translateX(-100%)' }}

But it seems it's not needed? 🤔

[jjenzz]

it will be positioned correctly when the parent wrapper isn't display: flex. the docs have added the flex to position the label. it'll need to be solved some other way i imagine.

[mglavall]

I'm having this issue which the input is not positioned on top of the button and it's even further away.
In this picture I'm hovering the terms and conditions input. It's so far away it even creates a scroll on the page.

[mglavall]

More on this: Found out that in my case there is a further parent that is a display: grid which if I disable the input positions at the side. So this might be another different issue, but related

[enix79]

I read the discussion, but I still do not understand how the accepted answer helps here. We also use RHF and we have to pass ref to the input, not button to get it work :(

[washingtonsoares]

If you, like me, just want to integrate with RHF, then this might be helpful:

<Controller
  control={control}
  name="hasAcceptedTerms"
  render={({ field: { onChange, value } }) => (
    <Checkbox
      onCheckedChange={onChange}
      checked={value}
      id="terms"
    />
  )}
/>

[58bits]

If you, like me, just want to integrate with RHF, then this might be helpful:

<Controller
  control={control}
  name="hasAcceptedTerms"
  render={({ field: { onChange, value } }) => (
    <Checkbox
      onCheckedChange={onChange}
      checked={value}
      id="terms"
    />
  )}
/>

This is also what we do at the moment.