text: import React from 'react';
  import { Form as FinalForm, FormSpy } from 'react-final-form';
  import * as validators from '../../util/validators';
  import { Button } from '../../components';
  import FieldBoolean from './FieldBoolean';
  
  const formName = 'Styleguide.FieldBoolean.Form';
  
  const FormComponent = props => (
    <FinalForm
      {...props}
      formId={formName}
      render={fieldRenderProps => {
        const { form, handleSubmit, onChange, invalid, pristine, submitting } = props;
        const required = validators.requiredBoolean('This field is required');
        const submitDisabled = invalid || pristine || submitting;
        return (
          <form
            onSubmit={e => {
              e.preventDefault();
              handleSubmit(e);
            }}
          >
            <FormSpy onChange={onChange} />
            <FieldBoolean
              id={`${form}.boolOption`}
              name="boolOption"
              label="Boolean option"
              placeholder="Choose yes/no"
              validate={required}
            />
            <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>
              Submit
            </Button>
          </form>
        );
      }}
    />
  );
  
  export const YesNo = {
    component: FormComponent,
    props: {
      onChange: formState => {
        if (Object.keys(formState.values).length > 0) {
          console.log('form values changed to:', formState.values);
        }
      },
      onSubmit(values) {
        console.log('onSubmit:', values);
      },
    },
    group: 'inputs',
  };
  