JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div class="container">
  <p>
    Here, I've added a select component with a custom default value that fetches from local storage and a change event handler that sets to local storage.
  </p>
  <div id="formio"></div>
  <button id="changeButton" class="btn btn-primary">
    Reorder
  </button>
</div>

JavaScript

const formDefinition = {
  "display": "wizard",
  "components": [{
      "key": "page1",
      "input": false,
      "components": [{
          "type": "textfield",
          "multiple": true,
          "key": "textfieldonpage1",
          "label": "Textfield on page 1",
          "tableView": true,
          "input": true
        },
        {
          "type": "number",
          "validate": {
            "required": true
          },
          "defaultValue": 0,
          "key": "numberField",
          "label": "Number Field",
          "inputType": "number",
          "tableView": true,
          "input": true
        }
      ],
      "title": "First",
      "type": "panel",
      "tableView": false,
      "label": "Panel"
    },
    {
      "tableView": false,
      "key": "page2",
      "input": false,
      "components": [{
          "type": "textfield",
          "validate": {
            "required": true
          },
          "key": "textfieldonPage2",
          "label": "Textfield on Page 2",
          "tableView": true,
          "input": true
        },
        {
          "input": true,
          "tableView": true,
          "label": "Customer",
          "key": "page2Customer",
          "placeholder": "Select a customer",
          "data": {
            "url": "https://examples.form.io/customer/submission",
            "headers": [{
              "value": "",
              "key": ""
            }]
          },
          "dataSrc": "url",
          "valueProperty": "data.email",
          "template": "<span>{{ item.data.firstName }} {{ item.data.lastName }}</span>",
          "type": "select",
          "widget": "html5",
          "searchField": "data.email"
        },
        {
          "clearOnHide": false,
          "type": "fieldset",
          "components": [{
            "type": "textfield",
            "key": "textfield",
            "label": "Textfield",
            "tableView": true,
            "input": true
          }],
         ...