Checkbox Group Component in React-Final-Form
Tags: fieldarray, checkbox, reactfinalform, stateless
Published: 2018-11-06 20:39:11

---
title: Checkbox Group Component in React-Final-Form
published: true
description: Using FieldArray to build a simple stateless functional CheckboxGroup component from an array of options using input checkbox and Material-UI
tags: fieldarray, checkbox, react-final-form, stateless
---
*Posted November 6, 2018*

Going to keep this short, because, by the time you most likely find this post, all you want is to just see it work, then copy and paste and get back to coding...

First imports these were required at minimum, though you will also need the 'final-form' package.
```
import React from "react";
import { Form, Field } from "react-final-form";
import { FieldArray } from 'react-final-form-arrays'
import arrayMutators from 'final-form-arrays'
import Checkbox from "@material-ui/core/Checkbox";
```
Setup your array of options:
```
const myOptions = ["Meat Lover", "Veggie Heaven", "Hawaii-5-0", "Inferno"];
```
Setup your onSubmit method:
```
const onSubmit = async values => {
  window.alert(JSON.stringify(values, 0, 2));
};
```
This is your custom component using standard input of type checkbox:
```
const CheckboxGroup = ({ fields, options }) => {
  const toggle = (event, option) => {
    if (event.target.checked) fields.push(option);
    else fields.remove(option);
  };
  return (
    <div style={{ color: "blue" }}>
      {options.map(option => (
        <div key={option}>
          <input
            type="checkbox"
            onClick={event => toggle(event, option)}
          />
          {option}
        </div>
      ))}
    </div>
  );
};
```
This is a more fancy custom component using Material-UI Checkbox:
```
const CheckboxGroupMUI = ({ fields, options }) => {

  const toggle = (event, option) => {
    if (event.target.checked) fields.push(option);
    else fields.remove(option);
  };

  return (
    <div style={{ color: "darkblue" }}>
      {options.map(option => (
        <div key={option}>
          <Checkbox
            value={option}
            onChange={event => toggle(event, option)}
          />
          {option}         
        </div>
      ))}
    </div>
  );
};
```

Ok now here's the main part:
```
function App() {
  return (
    <div>
      <h3>Checkboxes FML</h3>     
      <Form
        onSubmit={onSubmit}
        mutators={{
          ...arrayMutators
        }}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit}>
            
            <label>Pizza using Custom Checkbox Group</label>
            <FieldArray
              name="pizzas-1"
              component={CheckboxGroup}
              options={myOptions}
            />
            <hr />
            <label>Pizza using Custom Material-UI Checkbox Group</label>
            <FieldArray
              name="pizzas-2"
              component={CheckboxGroupMUI}
              options={myOptions}
            />
            <hr />
            <div>
              <button type="submit" disabled={submitting || pristine}>
                Submit
              </button>
            </div>
            <pre>{JSON.stringify(values, 0, 2)}</pre>
          </form>
        )}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
And here it is in action:
{% codesandbox 5w511k5v0k %}

Hope this helps.  If you have questions, please post below.