Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

d3v-g
Copy link

@d3v-g d3v-g commented Nov 10, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Form] Add support to control with other primitives
1 participant