JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<body>
  <link href="https://lforms-service.nlm.nih.gov/lforms-versions/7.1.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://lforms-service.nlm.nih.gov/lforms-versions/7.1.0/lforms.min.js"></script>
</body>

JavaScript

// This is the form definition
window.formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    allowMultipleEmptyRepeatingItems: true,
    hideHeader: true,
    obrHeader: false,
  },
  items: [{
    "questionCode": "X123",
    "question": "Family member",
    "header": true,
    "items": [{
    	"questionCode": "X124",
      "question": "Name"
    },{
      "questionCode": "X125",
      "question": "Surgerical History",
      "header":  true,
      "questionCardinality": {"min": "1", "max": "*"},
      "items": [{
      	 "questionCode": "X126",
         "question": "Date",
         "dataType": "DT"
      },{
      	 "questionCode": "X127",
         "question": "Surgery type"
      }]
    }]
  }]
};
LForms.Util.addFormToPage('formDef', 'formContainer');