search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.93k stars 833 forks source link

[Checkbox] Allow Checkbox BubbleInput to pass validation state when used within Form primitive #3221

Open d3v-g opened 2 weeks ago

d3v-g commented 2 weeks ago

Description

The changes in this PR enable the use of Checkbox within the Form primitive, and have validation hooked up for valueMissing when checkbox is not ticked. To achieve this, we trigger a change event on the underlying BubbleInput component when the checked state is changed for the Checkbox. The onInvalid callback is passed into BubbleInput instead of the button element to ensure validation is properly handled when used within the Form primitive. In this open issue #2659 someone mentioned the issue with focusing on aria-hidden elements, and I've added a span around the input to get around the error.

I found this comment on the Radix website, but I've not found an associated PR. If someone is already working on this, appreciate a link to the branch to compare and/or merge changes.

image

Additional unit tests have been added to Checkbox to test the input change event is fired. I've also added an additional Checkbox story to show it working with the Form primitive.

Partially fixes #2659 . Appreciate this PR doesn't solve not being able to use Select in Form properly. I wanted to make sure the solution is acceptable for Checkbox before having a crack at Select next.