primitives
primitives copied to clipboard
radix-ui
Add native checkbox element
Feature request
Overview
I'm creating this issue because it currently is not possible to change the state of the checkbox component when javascript is disabled. For example this allows these user to opt-out of something like a registration. Because this does not work I suggest that the button element should be swapped out with a native html checkbox element.
The html checkbox element also provides an indeterminate attribute to cover this case as well.
Examples in other libraries
The react library Mantine does this where they use an input element and add the type="checkbox" attribute to it.
Who does this impact? Who is this for?
This would be a break for users that either directly access the button element with Javascript via the DOM-API as well as for users that select the button element via css like:
.checkbox button {
/* some styles */
}
Hey @Haberkamp,
The fact it isn't a checkbox under the hood is an implementation detail that shouldn't matter. We do add a hidden native checkbox in cases where the checkbox is used in a form for example, but that's only to handle change events bubbling in forms.
I'm not clear what your issues are.
it currently is not possible to change the state of the checkbox component when javascript is disabled
@benoitgrelard it sounds like another progressive enhancement request.
@benoitgrelard it sounds like another progressive enhancement request.
Yes that exactly what I meant.
Because of this reason when using react-hook-form and uncontrolled input - register returns On/Off instead of boolean
The fact it isn't a checkbox under the hood is an implementation detail that shouldn't matter.
Why did you decide to implement a checkbox that isn't a checkbox under the hood, though? Just curious to hear the reasoning behind this decision. :)
Because of this reason when using react-hook-form and uncontrolled input - register returns On/Off instead of boolean
Just because of this, I created my own CheckBox component. I can't think of a reasoning why On/Off are being used while a simple boolean could have suficed. I mean even indeterminate should be a false state and be controlled internally like any other component library solved
