flex-template-web/src/components/FieldCheckbox/FieldCheckbox.example.js

import React from 'react';
import { Form as FinalForm, FormSpy } from 'react-final-form';
import { Button } from '../../components';
import FieldCheckbox from './FieldCheckbox';

const formName = 'Styleguide.FieldCheckbox.Form';

const FormComponent = props => (
  <FinalForm
    {...props}
    formId={formName}
    render={fieldRenderProps => {
      const { form, handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;

      const submitDisabled = invalid || pristine || submitting;

      return (
        <form
          onSubmit={e => {
            e.preventDefault();
            handleSubmit(e);
          }}
        >
          <FormSpy onChange={onChange} />
          <FieldCheckbox id="checkbox-id1" name="checkbox-group" label="option 1" value="option1" />
          <FieldCheckbox id="checkbox-id2" name="checkbox-group" label="option 2" value="option2" />

          <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>
            Submit
          </Button>
        </form>
      );
    }}
  />
);

export const Checkbox = {
  component: FormComponent,
  props: {
    onChange: formState => {
      if (Object.keys(formState.values).length > 0) {
        console.log('form values changed to:', formState.values);
      }
    },
    onSubmit: values => {
      console.log('Submit values of FieldCheckbox: ', values);
    },
  },
  group: 'inputs',
};