CheckBox.js

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

const languageState = ['vi', 'en', 'jp'];

export default () => {
  const handleSubmit = values => {
    console.log(values.languages);
  };
  return (
    <Formik
      onSubmit={handleSubmit}
      initialValues={{
        languages: [],
      }}
    >
      {() => (
        <Form>
          <FieldArray name="languages">
            {arrayHelpers => {
              return languageState.map((language, index) => {
                return (
                  <StyledWrap
                    key={index}
                    htmlFor={`languages.${index}.language`}
                    style={{ marginBottom: '10px' }}
                  >
                    <label htmlFor={`languages.${index}.language`}>
                      <input
                        id={`languages.${index}.language`}
                        type="checkbox"
                        name={`languages.${index}.language`}
                        value={language}
                        checked={arrayHelpers.form.values.languages.includes(language)}
                        onChange={e => {
                          if (e.target.checked) arrayHelpers.push(language);
                          else {
                            const idx = arrayHelpers.form.values.languages.indexOf(language);
                            arrayHelpers.remove(idx);
                          }
                        }}
                        hidden
                        className="check-custom"
                      />
                      <span className="check-toggle" />
                      <label style={{ marginLeft: '10px' }} htmlFor={`languages.${index}.language`}>
                        {language}
                      </label>
                    </label>
                  </StyledWrap>
                );
              });
            }}
          </FieldArray>

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

const StyledWrap = styled.div``;