@mvneerven/xo-form v1.0.26

Introduction

XO Form is a tiny web forms library that translates declarative JavaScript schemas to complex data-bound web forms.

XO Form is written as Web Components in pure ES6+ JavaScript modules, and has just one dependency: Lit.

Features

• Reactive rendering
• Full two-way databinding
• Multi-page forms/wizards
• Rules engine for conditional logic
• Supports all HTML elements, including Custom Elements (Web Components)

Setup

npm i @mvneerven/xo-form

How it works

<xo-form theme="material" src="/forms/my-form.js"></xo-form>

... where my-form.js looks like this:

export const form = {
  model: {
    instance: {
      state: {},
      data: {
        name: "",
        msg: "",
      },
    },
    rules: {
      "#/state/submit": [
        {
          value: (context) => {
            alert(JSON.stringify(context.model.instance.data, null, 2));
          },
        },
      ],
    },
  },
  pages: [
    {
      label: "My Form",

      fields: [
        {
          type: "text",
          bind: "#/data/name",
          required: true,
          label: "Your name",
          placeholder: "Enter your name",
        },
        {
          type: "textarea",
          bind: "#/data/msg",
          label: "Your message",
          required: true,
          placeholder: "Enter a message",
          maxlength: 100,
          rows: 6,
        },
        {
          type: "button",
          bind: "#/state/submit",
          label: "Submit",
        },
      ],
    },
  ],
};