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

Native form validation for the checkbox component with a hidden checkbox #444

Closed
zommerberg opened this issue Apr 10, 2024 · 1 comment · May be fixed by #469
Closed

Native form validation for the checkbox component with a hidden checkbox #444

zommerberg opened this issue Apr 10, 2024 · 1 comment · May be fixed by #469
Labels
enhancement An improvement to an existing feature/component Svelte 5 Roadmap This issue is planned to be addressed or fixed when the library migrates to Svelte 5.

Comments

@zommerberg
Copy link

zommerberg commented Apr 10, 2024

Describe the feature in detail (code, mocks, or screenshots encouraged)

Currently the checkbox component is implemented as a button element. This setup doesn't trigger native form validation on submit when the checkbox is required but not checked, as it lacks a real input type="checkbox". Could you consider adding a hidden native checkbox within the custom component? Implementing this would not only ensure compatibility with standard HTML form validation but also enhance accessibility and user experience by leveraging the browser's built-in validation.

What type of pull request would this be?

None

Provide relevant links or additional information.

I am currently adding the following right above the Checkboxprimitive.Root to make it work:

image

@zommerberg zommerberg changed the title Add a hidden native input element for the checkbox. Native form validation for the checkbox component with a hidden checkbox Apr 10, 2024
@huntabyte huntabyte mentioned this issue Jun 9, 2024
3 tasks
@huntabyte huntabyte added enhancement An improvement to an existing feature/component Svelte 5 Roadmap This issue is planned to be addressed or fixed when the library migrates to Svelte 5. labels Jul 9, 2024
@huntabyte huntabyte mentioned this issue Jul 31, 2024
70 tasks
@huntabyte
Copy link
Owner

Closing as fixed in bits-ui@next

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement An improvement to an existing feature/component Svelte 5 Roadmap This issue is planned to be addressed or fixed when the library migrates to Svelte 5.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants