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'), 'https://examples.form.io/example');


        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
              }
            ]
          },
          {
            "type": "panel",
            "collapsed": true,

            "collapsible": true,
            "key": "panel",
            "conditional": {
              "show": false,
              "when": "players",
              "gte": 1
            },
            "type": "panel",
            "label": "Panel",
            "input": false,
            "tableView": false,

            "components": [{
                "label": "Car Service",
                "type": "checkbox",
                "key": "carService",
                "input": true

              },
              {
                "label": "Pickleball Coaching",
                "type": "checkbox",
                "key": "pickleballCoaching",
                "input": true
              },
              {

                "label": "Premium Breakfast",
                "type": "checkbox",
                "key": "premiumBreakfast",
                "input": true
              },
              {
                "label": "Trip Insurance",
                "type": "checkbox",
               ...