JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div id="formio"></div>

JavaScript

Formio.icons = 'fontawesome';
Formio.createForm(document.getElementById('formio'), {
  "components": [{
      "label": "Select Boxes",
      "optionsLabelPosition": "right",
      "tableView": false,
      "values": [{
          "label": "Hello",
          "value": "hello",
          "shortcut": ""
        },
        {
          "label": "World",
          "value": "world",
          "shortcut": ""
        },
        {
          "label": "Foo",
          "value": "foo",
          "shortcut": ""
        },
        {
          "label": "Bar",
          "value": "bar",
          "shortcut": ""
        }
      ],
      "customDefaultValue": "console.log(value)",
      "key": "selectBoxes",
      "type": "selectboxes",
      "input": true,
      "inputType": "checkbox",
      "defaultValue": {
        "hello": false,
        "world": false,
        "foo": false,
        "bar": false
      }
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ],
}).then(function(form) {
  const component = form.getComponent('selectBoxes');
  component.setValue({
    hello: true,
    world: true,
    foo: true,
    bar: true
  });
  component2.setValue(true);
});