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/4.19.2/formio.full.min.css">
<script src="https://cdn.form.io/formiojs/4.19.2/formio.full.min.js"></script>
<div class="container">
  <div id="formio" />
</div>

JavaScript

const formDefinition = {
  components: [{
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      input: true,
      validate: {
        required: true,
      },
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      input: true,
      validate: {
        required: true,
      },
    },
    {
      type: 'phoneNumber',
      key: 'phoneNumber',
      label: 'Phone Number',
      input: true,
    },
    {
      type: 'email',
      key: 'email',
      label: 'Email',
      input: true,
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary',
      disableOnInvalid: false,
    },
  ],
};

Formio.createForm(document.getElementById("formio"), formDefinition).then((form) => {
  form.on("error", (errors) => console.log("Hello, world!"))
})