Checkbox forwarded Ref should set on Input field and not Button #874
-
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. |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 37 replies
-
This is intentional because the Would you mind helping us understand why you need a reference to an |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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) |
Beta Was this translation helpful? Give feedback.
-
The @jjenzz Any ideas? Thanks. |
Beta Was this translation helpful? Give feedback.
-
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 :( |
Beta Was this translation helpful? Give feedback.
-
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"
/>
)}
/> |
Beta Was this translation helpful? Give feedback.
This is intentional because the
Checkbox
is abutton
so you will get abutton
. Theinput
is only rendered when it is used within aform
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?