VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <div class="container">
    <div id="formio"></div>
  </div>

JavaScript

const formDefinition = {
  "display": "form",
  "components": [
    {
      "label": "Select Boxes",
      "optionsLabelPosition": "right",
      "tableView": false,
      "values": [
        {
          "label": "Different",
          "value": "hello",
          "shortcut": ""
        },
        {
          "label": "Label",
          "value": "world",
          "shortcut": ""
        }
      ],
      "key": "selectBoxes",
      "type": "selectboxes",
      "input": true,
      "inputType": "checkbox"
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    },
    {
      "html": "<p><strong>IS IT CHECKED?!</strong></p><p>Label:&nbsp;{{ utils.getComponent(form.components, 'selectBoxes').values.find(function (selectBox) { return selectBox.value === 'hello' }).label }}<br>Checked: {{data.selectBoxes.hello}}</p><p>Label:&nbsp;{{ utils.getComponent(form.components, 'selectBoxes').values.find(function (selectBox) { return selectBox.value === 'world' }).label }}<br>Checked: {{data.selectBoxes.world}}</p>",
      "label": "Content",
      "refreshOnChange": true,
      "key": "content",
      "type": "content",
      "input": false,
      "tableView": false
    }
  ]
}

Formio.createForm(document.getElementById('formio'), formDefinition).then(function(form) {
  
});