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": "Hello",
      "tableView": false,
      "key": "hello",
      "type": "checkbox",
      "input": true,
      "defaultValue": false
    },
    {
      "label": "World",
      "tableView": false,
      "key": "world",
      "type": "checkbox",
      "input": true,
      "defaultValue": false
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ],
}).then(function(form) {
  const component = form.getComponent('hello');
  const component2 = form.getComponent('world');
  component.setValue(true);
  component2.setValue(true);
});