JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/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>

start
<div id='formio'></div>
end

JavaScript

window.onload = function() {

  Formio.createForm(document.getElementById('formio'), formioSettings);
  console.log('rendered form');
}



const formioSettings = {
  "title": "Page 2",
  "label": "Page 2",
  "type": "panel",
  "key": "page2",
  "input": false,
  "tableView": false,
  "components": [{
      "label": "How many will be playing in tournaments?",
      "type": "radio",
      "key": "players",
      "values": [{
          "label": "1 Player",
          "value": 1
        },
        {
          "label": "2 Players",
          "value": 2
        },
        {
          "label": "3+ Players",
          "value": 3
        }
      ]
    },
    {
      "conditional": {
        "gte": 1,
        "when": "players",
        "show": false
      },
      "type": "panel",
      "title": "Optional Services",
      "key": "optionalServices",
      "components": [{
          "label": "Car Service",
          "type": "checkbox",
          "key": "carService",
          "value": true,
          "tooltip": "If no premium transportation saves $1200"
        },
        {
          "label": "Pickleball Coaching",
          "type": "checkbox",
          "key": "pickleballCoaching",
          "value": true,
          "tooltip": "If no coaching saves $500"
        },
        {
          "label": "Premium Breakfast",
          "type": "checkbox",
          "key": "premiumBreakfast",
          "value": true,
          "tooltip": "If no premium breakfast saves $1,600"
        },
        {
          "label": "Trip Insurance",
          "type": "checkbox",
          "key": "tripInsurance",
          "value": true,
          "tooltip": "If no trip insurance and saves $2,000"
        }
      ]
    }
  ]
};