MUI Checkbox and Switch within Controller don't work as expected without default values.
See original GitHub issueDescribe the bug If a default value is not provided for MUI Checkbox or Switch, the component will return empty string as value on submit.
To Reproduce
- Go to sandbox example
- Click on
Submit
{}
- Check the checkbox and the switch and click on
Submit
again.
{
"Checkbox": "",
"switch": ""
}
- Uncoment
defaultValues
(lines 25-27).
const defaultValues = {
TextField: "",
Checkbox: false,
switch: false,
};
- repeat step 3.
{
"Checkbox": true,
"TextField": "",
"switch": true
}
Codesandbox link (Required) The sandbox example is a stripped down version of example from Controlled input.
https://codesandbox.io/s/react-hook-form-controller-d76q8
Expected behavior
Both MUI Checkbox and Switch should return bool
values even if default values were not set.
Desktop (please complete the following information):
- OS: Chrome OS
- Browser: Chrome
- Version: 81
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
React Hook Forms + Material UI Checkboxes ... - Stack Overflow
I am using React Hook Forms and I want to send in the processing to receive the Checkbox value, which is ...
Read more >React Checkbox component - Joy UI - MUI
Checkbox , by default, comes without an unchecked component. To add an icon to both uncheck and checked states, use the uncheckedIcon and...
Read more >React Autocomplete component - Material UI - MUI
The autocomplete is a normal text input enhanced by a panel of suggested options. The widget is useful for setting the value of...
Read more >React Tooltip component - Material UI - MUI
Tooltips display informative text when users hover over, focus on, or tap an element.
Read more >React Checkbox component - Material UI - MUI
A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't. Visually, there...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
we detect if this is a checkbox by the initial value.
no, that’s the thing: we can’t guarantee by type, some of the checkbox (non MIUI) return string…