Top
CheckBox - Custom checked values
CheckBox
One of the important features of the component is assigning and using custom values for the checked, unchecked and indeterminate states of the <CheckBox />.
This is possible by using checkedValue (which defaults to true), uncheckedValue (which defaults to false) and indeterminateValue (which defaults to null).
The values of those three props determine the possible values for the checked (controlled) and defaultChecked (uncontrolled) props.
Have a look at the example below, where we use "on" for checked, "off" for unchecked and "-" for indeterminate.
The <CheckBox /> component is friendly to forms and their submit event, by generating a hidden input if you specify the name under which you want it to be submitted. You can even specify a submit value for each of the three states of the component, by using checkedSubmitValue, uncheckedSubmitValue and indeterminateSubmitValue.
If the <Checkbox /> is submitted when checked, the submit value will be the one specified by checkedSubmitValue, if defined, otherwise, will be submitted with the checkedValue.
If the <Checkbox /> is submitted when unchecked, the submit value will be the one specified by uncheckedSubmitValue, if defined, otherwise, will be submitted with the uncheckedValue.
If the <Checkbox /> is submitted when indeterminate, the submit value will be the one specified by indeterminateSubmitValue, if defined, otherwise, will be submitted with the indeterminateValue.
When any of the submit values is null, it will be submitted as an empty string "", since null is not a supported value for form submit.
Sometimes, just like in the example above, you want to support a third state - indeterminate. You can do so by specifying supportIndeterminate=true, since the default value for this prop is false.
When you have supportIndeterminate=true, you can also customize the value associated to the indeterminate state by using indeterminateValue (which defaults to null). In this case, the succession of states when the <Checkbox /> is clicked is the following:
Succession of states
--------------------

              click
    CHECKED -----------> UNCHECKED
       ^                    /
        \                  /
         \                /
   click  \              / click
           \            /
            \          /
             \        v
            INDETERMINATE
You can however change this order, via the nextValue function prop. Let's have a look at the same example as the above, but with indeterminate coming after the checked state.