title: Handling Multiple Checkboxes with Material UI and Formik
body: <p>I have a form with a checkbox group containing 4 checkboxes within. I need to pass the value to my api on submit of button which is to be handled through Formik.</p>
  <p>There are a few conditions on clicking a particular checkbox:</p>
  <ol>
  <li>If Height is checked, rest all should be checked as well</li>
  <li>If Breadth is checked, except for Height all should be checked</li>
  <li>If Length is checked, Both Nos and Length should be checked</li>
  </ol>
  <p>Nos can be checked or left unchecked</p>
  <p>Currently I'm declaring individual states for all checkboxes and declaring individual functions for each of the conditions mentioned above.</p>
  <p>Is there any other way to bind the values from the checkbox to Formik and pass to the api</p>
  <p>State and Individual Functions:</p>
  <pre><code>const [nos, setNos] = useState(false);
  const [length, setLength] = useState(false);
  const [breadth, setBreadth] = useState(false);
  const [height, setHeight] = useState(false);
  
  const handleHeight = e =&gt; {
    setNos(!nos);
    setLength(!length);
    setBreadth(!breadth);
    setHeight(!height);
  };
  
  const handleBreadth = e =&gt; {
    setNos(!nos);
    setLength(!length);
    setBreadth(!breadth);
  };
  
  const handleLength = e =&gt; {
    setNos(!nos);
    setLength(!length);
  };
  
  const handleNos = e =&gt;{
    setNos(!nos);
  };
  </code></pre>
  <p>Form with Formik:</p>
  <pre><code>const formik = useFormik({
      initialValues,
      validationSchema,
      onSubmit: async (values) =&gt; {
        alert(JSON.stringify(values, null, 2));
      },
  });
  
  return (
      &lt;&gt;
        &lt;form
          onKeyDown={onKeyDown}
          id=&quot;newJobDetails&quot;
          name=&quot;newJobDetails&quot;
          onSubmit={formik.handleSubmit}
          className={CommonClasses.formPartStyling}
          style={{
            height: SetFormSize(
              isAdd ? &quot;Add&quot; : textFieldDisable ? &quot;Info&quot; : &quot;Edit&quot;,
              1
            ),
            marginTop: marginTop || &quot;none&quot;,
          }}
        &gt;
          &lt;div
            className={CommonClasses.headingTextOfForms}
            style={{ marginLeft: &quot;4%&quot;, marginTop: &quot;2%&quot; }}
          &gt;
            Add Jobs
          &lt;/div&gt;
          &lt;Divider
            style={{
              marginTop: &quot;1%&quot;,
              marginBottom: &quot;3%&quot;,
              color: &quot;white&quot;,
            }}
          &gt;&lt;/Divider&gt;
          &lt;div
            style={{
              marginLeft: &quot;4%&quot;,
              marginTop: &quot;2%&quot;,
            }}
          &gt;
            &lt;Grid container&gt;
              &lt;Grid item xs={6}&gt;
                &lt;LabelStyling&gt;Job Name&lt;/LabelStyling&gt;
                &lt;TextField
                  id=&quot;jobName&quot;
                  name=&quot;jobName&quot;
                  variant=&quot;outlined&quot;
                  placeholder=&quot;Enter Job Name&quot;
                  value={formik.values.jobName}
                  onChange={formik.handleChange}
                  size=&quot;small&quot;
                  style={{
                    width: FORM_PART_VARS.INPUT_BOX_WIDTH,
                  }}
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={6}&gt;
                &lt;LabelStyling&gt;Stage&lt;/LabelStyling&gt;
                &lt;DropDown
                  id=&quot;stage&quot;
                  width={FORM_PART_VARS.INPUT_BOX_WIDTH}
                  value={formik.values.stage}
                  onChange={formik.handleChange}
                  error={formik.touched.stage &amp;&amp; Boolean(formik.errors.stage)}
                  helperText={formik.touched.stage &amp;&amp; formik.errors.stage}
                  mapFile={Stage}
                  placeholder=&quot;Select Stage&quot;
                /&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/div&gt;
          &lt;div
            style={{
              marginLeft: &quot;4%&quot;,
              marginTop: &quot;2%&quot;,
            }}
          &gt;
            &lt;Grid container&gt;
              &lt;Grid item xs={6}&gt;
                &lt;LabelStyling&gt;Measurement&lt;/LabelStyling&gt;
                &lt;TextField
                  id=&quot;measurement&quot;
                  name=&quot;measurement&quot;
                  variant=&quot;outlined&quot;
                  placeholder=&quot;Enter Measurement&quot;
                  value={formik.values.measurement}
                  onChange={formik.handleChange}
                  size=&quot;small&quot;
                  style={{
                    width: FORM_PART_VARS.INPUT_BOX_WIDTH,
                  }}
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={6}&gt;
                &lt;LabelStyling&gt;Measurement Unit&lt;/LabelStyling&gt;
                &lt;DropDown
                  id=&quot;measurement_unit&quot;
                  width={FORM_PART_VARS.INPUT_BOX_WIDTH}
                  value={formik.values.measurement_unit}
                  onChange={formik.handleChange}
                  error={
                    formik.touched.measurement_unit &amp;&amp;
                    Boolean(formik.errors.measurement_unit)
                  }
                  helperText={
                    formik.touched.measurement_unit &amp;&amp;
                    formik.errors.measurement_unit
                  }
                  mapFile={MeasurementUnit}
                  placeholder=&quot;Select Unit&quot;
                /&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/div&gt;
          &lt;div
            style={{
              marginLeft: &quot;4%&quot;,
              marginTop: &quot;2%&quot;,
            }}
          &gt;
            &lt;Grid container&gt;
              &lt;Grid item xs={6}&gt;
                &lt;LabelStyling&gt;Rate&lt;/LabelStyling&gt;
                &lt;TextField
                  name=&quot;jobRate&quot;
                  id=&quot;jobRate&quot;
                  variant=&quot;outlined&quot;
                  placeholder=&quot;Enter Rate&quot;
                  value={formik.values.jobRate}
                  onChange={formik.handleChange}
                  size=&quot;small&quot;
                  style={{
                    width: FORM_PART_VARS.INPUT_BOX_WIDTH,
                  }}
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={6}&gt;
                &lt;LabelStyling&gt;Service Rate&lt;/LabelStyling&gt;
                &lt;TextField
                  name=&quot;serviceRate&quot;
                  id=&quot;serviceRate&quot;
                  variant=&quot;outlined&quot;
                  placeholder=&quot;Enter Service Rate&quot;
                  value={formik.values.serviceRate}
                  onChange={formik.handleChange}
                  size=&quot;small&quot;
                  style={{
                    width: FORM_PART_VARS.INPUT_BOX_WIDTH,
                  }}
                /&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/div&gt;
          &lt;div
            style={{
              marginLeft: &quot;4%&quot;,
              marginTop: &quot;4%&quot;,
            }}
          &gt;
            
              &lt;LabelStyling&gt;Select Measurement(s)&lt;/LabelStyling&gt;
              
                  &lt;FormGroup row&gt;
                  &lt;FormControlLabel control={&lt;CheckBox checked={nos} onChange={handleNos} name=&quot;Nos&quot; id=&quot;1&quot;/&gt;} label=&quot;Nos&quot; /&gt;
                  &lt;FormControlLabel control={&lt;CheckBox checked={length} onChange={handleLength}  name=&quot;Length&quot; id=&quot;2&quot;/&gt;} label=&quot;Length&quot; style={{marginLeft: &quot;15px&quot;}}/&gt;
                  &lt;FormControlLabel control={&lt;CheckBox checked={breadth} onChange={handleBreadth}  name=&quot;Breadth&quot; id=&quot;3&quot;/&gt;} label=&quot;Breadth&quot; style={{marginLeft: &quot;15px&quot;}}/&gt;
                  &lt;FormControlLabel control={&lt;CheckBox checked={height} onChange={handleHeight} name=&quot;Height&quot; id=&quot;4&quot;/&gt;} label=&quot;Height&quot; style={{marginLeft: &quot;15px&quot;}}/&gt; 
             &lt;/FormGroup&gt;
              
           
          &lt;/div&gt;
          &lt;div
            style={{
              marginLeft: &quot;4%&quot;,
              marginTop: &quot;4%&quot;,
            }}
          &gt;
            &lt;LabelStyling&gt;Select Job Type&lt;/LabelStyling&gt;
            &lt;FormGroup row&gt;
              &lt;FormControlLabel control={&lt;CheckBox name=&quot;jobType&quot; value=&quot;Residential&quot;/&gt;} label=&quot;Residential&quot;/&gt;
              &lt;FormControlLabel control={&lt;CheckBox name=&quot;jobType&quot; value=&quot;Commercial&quot;/&gt;} label=&quot;Commercial&quot;/&gt;
              &lt;FormControlLabel control={&lt;CheckBox name=&quot;jobType&quot; value=&quot;Infrastructure&quot;/&gt;} label=&quot;Infrastructure&quot;/&gt;
            &lt;/FormGroup&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/&gt;
    );
  </code></pre>