dohomi / react-hook-form-mui

Material-UI form components ready to use with react-hook-form
https://react-hook-form-material-ui.vercel.app
MIT License
556 stars 111 forks source link

Boolean option for RadioButtonGroup #294

Open smeet2296 opened 3 months ago

smeet2296 commented 3 months ago

Duplicates

Latest version

Summary 💡

Currently RadioButtonGroup Element supports string and number. But if I want to use a Yes/No radio button which should store true/false its not working.

Example optionsArray : [{"id":true,"value":"Yes"},{"id":false,"value":"No"}]

If for reducing complexity there is a way that the options have string true/false values and then the value gets stored as boolean that would also be fine

Examples 🌈

No response

dohomi commented 3 months ago

any PR is welcome

smeet2296 commented 3 months ago

@dohomi

I found a workaround

For the example optionsArray mentioned above, we can do the following

transform={{ input: (value) => { return value != null ? value : ""; }, output: (_, value) => { return value === "true" ? true : value === "false" ? false : ""; }, }}

The only problem is https://github.com/react-hook-form/react-hook-form/issues/2323

For this, we can avoid using required in rule as well as prop and use validate function in the rule instead. We will have to add the asterisk in the label manually.

I wanted to add boolean type inbuilt but then due to the above mentioned git issue, required rule and prop will stop working

dohomi commented 3 months ago

I really think you make yourself too much trouble: either use a checkbox / switch which handle true/false natively or use "0" "1" and just cast the value shortly before you persist it in the database inside your handleSubmit. I am currently loaded with work that I won't spend time on the issue. If you find something usable I am happy to review a PR

smeet2296 commented 3 months ago

Yes we can do that if there is only a form that we are building. But I am building a form configurator and I cannot have such restrictions that a user cannot configure boolean values through it. The above solution works for now.