JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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

const element = document.getElementById('formio');
Formio.createForm(element, {
  components: [{
      label: 'Text Field',
      applyMaskOn: 'change',
      tableView: true,
      validateWhenHidden: false,
      key: 'textField',
      type: 'textfield',
      input: true
    },
    {
      type: 'button',
      label: 'Set Value',
      key: 'setValue',
      disableOnInvalid: true,
      input: true,
      event: 'setValue',
      action: 'event',
    },
    {
      type: 'button',
      label: 'Log Form Data',
      key: 'logFormData',
      input: true,
      custom: "console.log(data);console.log(instance.root.getComponent('textField').getValue());",
      action: 'custom',
    },
  ],
}).then((form) => {
  // get from page query
  // get from SQL REST API 
  form.submission = {
    data: {
      textField: "Brendan"
    }
  }
})