text: /* You can use JSON Logic to create complex conditionals and validation
  criteria. */
  Formio.createForm(document.getElementById("formio"), {
    components: [
      {
        type: "textfield",
        label: 'Type "Show"',
        description: "Must be exact, and case sensitive.",
        key: "typeShow",
        input: true,
        inputType: "text",
        validate: {
          json: {
            if: [
              {
                "==": [
                  {
                    var: "data.typeShow",
                  },
                  "Show",
                ],
              },
              true,
              "You must type 'Show'!",
            ],
          },
        },
      },
      {
        type: "textfield",
        label: 'Type "Me"',
        description: "Must be exact, and case sensitive.",
        key: "typeMe",
        input: true,
        inputType: "text",
        validate: {
          json: {
            if: [
              {
                "==": [
                  {
                    var: "data.typeMe",
                  },
                  "Me",
                ],
              },
              true,
              "You must type 'Me'!",
            ],
          },
        },
        conditional: {
          json: {
            "===": [
              {
                var: "data.typeShow",
              },
              "Show",
            ],
          },
        },
      },
      {
        type: "textfield",
        label: 'Type "The"',
        description: "Must be exact, and case sensitive.",
        key: "typeThe",
        input: true,
        inputType: "text",
        validate: {
          json: {
            if: [
              {
                "==": [
                  {
                    var: "data.typeThe",
                  },
                  "The",
                ],
              },
              true,
              "You must type 'The'!",
            ],
          },
        },
        conditional: {
          json: {
            "===": [
              {
                var: "data.typeMe",
              },
              "Me",
            ],
          },
        },
      },
      {
        type: "textfield",
        input: true,
        inputType: "text",
        label: 'Type "Monkey!"',
        description: "Don't forget the '!'.",
        key: "typeMonkey",
        validate: {
          json: {
            if: [
              {
                "==": [
                  {
                    var: "data.typeMonkey",
                  },
                  "Monkey!",
                ],
              },
              true,
              "You must type 'Monkey!'",
            ],
          },
        },
        conditional: {
          json: {
            "===": [
              {
                var: "data.typeThe",
              },
              "The",
            ],
          },
        },
      },
      {
        key: "monkey",
        input: false,
        tag: "img",
        attrs: [
          {
            attr: "src",
            value:
              "https://ichef.bbci.co.uk/news/660/cpsprodpb/025B/production/_85730600_monkey2.jpg",
          },
          {
            attr: "style",
            value: "width: 100%;",
          },
        ],
        className: "",
        content: "",
        type: "htmlelement",
        conditional: {
          json: {
            "===": [
              {
                var: "data.typeMonkey",
              },
              "Monkey!",
            ],
          },
        },
      },
      {
        key: "submit",
        type: "button",
        action: "submit",
        label: "Submit",
        theme: "primary",
      },
    ],
  });
  