adobe
Hope that Radio and Checkbox will support the Number type
Provide a general summary of the feature here
I hope that Radio and Checkbox will support the Number type, as they currently only support strings.
🤔 Expected Behavior?
The value of RadioGroupProps/RadioProps/CheckboxGroupProps/Checkbox can also support number or number[].
😯 Current Behavior
The value of RadioGroupProps/RadioProps/CheckboxGroupProps/Checkbox only support string or string[]. And actually the input tag supports number value. Why not support number?
💁 Possible Solution
No response
🔦 Context
In our development, some data gotten from the server is only number list. These data is hard to be used in RadioGroup or CheckboxGroup component as they had to be transformed to string.
💻 Examples
No response
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Looks like we just need to update the types https://github.com/adobe/react-spectrum/blob/6288d4a3a886a52473d763dde569e0f7fb33d11e/packages/%40react-types/radio/src/index.d.ts#L45
We already support it in the logic it appears https://codesandbox.io/p/sandbox/goofy-lake-l2czh8?file=%2Fsrc%2FApp.js%3A13%2C20
@uniqueeest go for it! As @snowystinger linked above, it seems like that type needs to be updated to be string | number. Also please take a look at https://react-spectrum.adobe.com/contribute.html for steps you'll need to do before contributing.
It seems will force return string value if using the keyboard actions to change the radio group value.
Maybe the following process causes:
https://github.com/adobe/react-spectrum/blob/5334df7f18185281b3ea9e78d99fb86110b4806b/packages/%40react-aria/radio/src/useRadioGroup.ts#L122
Unfortunately I think this is a breaking change. People would need to update their types in a lot of places, as shown in the examples in #6628.
Also, input values are always strings in the DOM (see MDN), and even in React's docs. I'm not sure why @types/react allows numbers. The value will be coerced to a string in the DOM anyway, so the value in onChange will always be a string no matter what. We could allow that but IMO it's kinda weird so sticking with strings everywhere is probably the clearest about what's actually happening.
@devongovett Here are some of my thoughts:
I don't think this has anything to do with the DOM only supporting string values — we can easily handle value binding through JavaScript.
When using a Checkbox on its own, we typically don't care about the value property, we just need to know whether it's selected.
But when a Checkbox or Radio is used in combination with a CheckboxGroup or RadioGroup, it behaves more like a list of options — we select specific options, and the component returns the corresponding values.
It's also worth noting that many component libraries in the community support binding numeric values to Checkbox and Radio components.