Toggle.js

import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';
import styled from 'styled-components';

const languageState = [true];

export default () => {
  const handleSubmit = values => {
    console.log(values.languages);
  };
  return (
    <Formik
      onSubmit={handleSubmit}
      initialValues={{
        languages: [true],
      }}
    >
      {() => (
        <Form>
          <FieldArray name="languages">
            {arrayHelpers => (
              <StyledWrap htmlFor="languages" style={{ marginBottom: '10px', marginLeft: '100px' }}>
                <label htmlFor="languages">
                  <input
                    id="languages"
                    type="checkbox"
                    name="languages"
                    value={languageState[0]}
                    checked={arrayHelpers.form.values.languages.includes(languageState[0])}
                    onChange={e => {
                      if (e.target.checked) arrayHelpers.replace(0, true);
                      else {
                        arrayHelpers.replace(0, false);
                      }
                    }}
                    hidden
                    className="check-custom toggle-switch"
                  />
                  <span className="check-toggle" />
                  <label style={{ marginLeft: '10px' }} htmlFor="languages">
                    languages
                  </label>
                </label>
              </StyledWrap>
            )}
          </FieldArray>

          <br />
          <button type="submit">submit</button>
        </Form>
      )}
    </Formik>
  );
};

const StyledWrap = styled.div`
  /* Styles for hiding the native checkbox */
  input[type='checkbox'].check-custom {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Styles for the basic appearance of the toggle switch */
  input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
    width: 2.5rem;
    height: 1.5rem;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }

  /* Common styles for the ::before and ::after pseudo-elements of the toggle switch */
  input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle,
  input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
    &::before {
      content: '';
      top: 0;
      left: 0;
      position: absolute;
    }
    &::after {
      content: '';
      top: 0;
      left: 0;
      position: absolute;
    }
  }

  /* Styles for the ::before pseudo-element (the outer frame) of the toggle switch */
  input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
    &::before {
      width: 100%;
      height: 100%;
      border-radius: 1rem;
      background: #dbdbdb;
    }
  }

  /* Styles for the ::after pseudo-element (the inner slider) of the toggle switch */
  input[type='checkbox'].check-custom.toggle-switch ~ .check-toggle {
    &::after {
      width: 1.1rem;
      height: 1.1rem;
      margin: 3px 5px;
      border-radius: 50%;
      background: #ffffff;
    }
  }

  /* Styles for the ::before pseudo-element of the toggle switch in hover state */
  input[type='checkbox'].check-custom.toggle-switch:hover ~ .check-toggle {
    &::before {
      background: #c4c4c4;
    }
  }

  /* Styles for the ::before pseudo-element of the toggle switch in focus state */
  input[type='checkbox'].check-custom.toggle-switch:focus ~ .check-toggle {
    &::before {
      box-shadow: 0 0 0 2px rgba(23, 133, 255, 0.5);
    }
  }

  /* Styles for the ::before pseudo-element of the toggle switch in both focus and checked or enabled state */
  input[type='checkbox'].check-custom.toggle-switch:focus:checked ~ .check-toggle {
    &::before {
      box-shadow: 0 0 0 2px rgba(97, 191, 158, 0.5);
    }
  }

  /* Styles for the ::before pseudo-element of the toggle switch in checked or enabled state */
  input[type='checkbox'].check-custom.toggle-switch:checked ~ .check-toggle {
    &::before {
      background: #61bf9e;
    }
  }

  /* Styles for the ::after pseudo-element of the toggle switch in checked or enabled state */
  input[type='checkbox'].check-custom.toggle-switch:checked ~ .check-toggle {
    &::after {
      left: auto;
      right: 0;
    }
  }
`;

Nice