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 formJson = {
  "display": "form",
  "components": [{
      "label": "Number",
      "applyMaskOn": "change",
      "mask": false,
      "tableView": false,
      "delimiter": true,
      "requireDecimal": true,
      "inputFormat": "plain",
      "truncateMultipleSpaces": false,
      "key": "myNumber",
      "type": "number",
      "decimalLimit": 2,
      "input": true,
      "decimalSymbol": ",",
      "thousandsSeparator": "."
    },
    {
      "label": "Currency",
      "applyMaskOn": "change",
      "mask": false,
      "spellcheck": true,
      "tableView": false,
      "currency": "USD",
      "inputFormat": "plain",
      "truncateMultipleSpaces": false,
      "key": "myCurrency",
      "type": "currency",
      "input": true,
      "delimiter": true,
      "decimalSeparator": ",",
      "thousandsSeparator": ".",
      "keyModified": true
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
};

Formio.builder(document.getElementById("formio"));