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" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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 class="container">
  <div id="formio">
  </div>
</div>

JavaScript

window.onload = function() {
  Formio.createForm(document.getElementById('formio'), 'https://avetjuvcpvkuvdn.form.io/supporttest').then((form) => {
    form.on('change', ({
      changed,
      data
    }) => {
      if (changed.component.key === 'isPlayerManager') {
        form.getComponent('tabs').setTab(1);
      }
      if (changed.component.key === 'isFromOutsideOfTheUs') {
        const currencyComponent = form.getComponent('payTheMan');
        currencyComponent.currency = "EUR";
        // workaround for assignment to prefix, assuming Bootstrap 4
currencyComponent.element.querySelector('.input-group-text').textContent = "EUR";
      }
    });

  });
}