Material-ui: [Radio] Accept number value

[sakulstra]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would have expected to be able to use value={100} inside a RadioGroup and FormControlLabel.
The docs state, that value is a string https://material-ui-1dab0.firebaseapp.com/api/radio-group/ https://material-ui-1dab0.firebaseapp.com/api/form-control-label/ , but I wonder if this is on purpose or accident.

Current Behavior

It actually works just fine, but throws type errors in the console.

If you also think that value should accept numbers, i'd be happy to create a pr.

Best Regards,
lukas

[oliviertassinari]

I agree, I think that we could be allowing a number too. This can be serialized in the native input.

[sakulstra]

Just for people stepping over this:
Using numbers as radio values will be problematic. Even when you provide a number as value the native onChange will return a stringified version of that which will then fail in the value === value comparison for checked state (you know because "123" !=== 123). So you would have to use Number.parseInt(value) onChange to set a valid state which also seems error prone.

The value is inlined into a native input. I don't think that we can do anything about it. You would have the same behavior without Material-UI.

tl;dr;

Just don't use numbers as values for radios. You're probably better off without them.

[palaniichukdmytro]

What should I do, If I need to pass bool to value, cause I need by default initialize the value for radio with redux-form. In my case I use react16, reduz-form, redux

My component

<Field  style={{paddingLeft: 20}} name='activationOutputDoor' component={renderRadioGroup}>
                            <Radio
                                value='false'
                                label={<FormattedHTMLMessage id='passage.activateOutputClosesDoor'/>}
                                disabled={!enableControlDoor|| !enableOutputSettings}
                            />,
                            <Radio
                                value='true'
                                label={<FormattedHTMLMessage id='passage.activateOutputOpensDoor'/>}
                                disabled={!enableControlDoor|| !enableOutpu />

When I inisialized this value in state

export const mapStateToProps = (state, {match: {params: {deviceId}}}) => {
    let initialValues = deviceId && state.entities.devices[deviceId]
    if (!initialValues)
        initialValues = {
            standAloneMode: true,
        }
    return {
        initialValues,
        deviceId,
        form: `device-${deviceId}`,
    }
}

In my case, if I pass to value bool true or false one value Radio will be checked as well, bu to choose the second on Value is not possible. How to pass bool to Radio value?

[cpBurn]

@palaniichukdmytro I just came here for the exactly same reason you did, I wanted to pass bool values in there. My actions shows the payload as {type: "@@redux-form/CHANGE", meta: {…}, payload: "true"}

I guess we could convert the data as @sakulstra wrote, before you update your store. But then again, why? I think keeping string is actually a good option here. I will convert my data later on, when I need to call an api with bool values.