forge-form · live playground

FormSchemaedit to update live

{
  "updateOn": "blur",
  "options": {
    "orientation": "column",
    "theme": "default"
  },
  "controls": [
    {
      "type": "text",
      "controlName": "firstName",
      "label": "First name",
      "placeholder": "Enter your first name",
      "validators": [
        {
          "type": "required"
        },
        {
          "type": "minlength",
          "value": 3
        }
      ]
    },
    {
      "type": "number",
      "controlName": "age",
      "label": "Age",
      "placeholder": "0",
      "validators": [
        {
          "type": "required"
        }
      ]
    },
    {
      "type": "checkbox",
      "controlName": "employed",
      "label": "Currently employed?",
      "updateOn": "change",
      "options": {
        "labelOrientation": "row"
      }
    },
    {
      "type": "select",
      "controlName": "plan",
      "label": "Plan",
      "placeholder": "Pick a plan",
      "items": [
        {
          "label": "Free",
          "value": "free"
        },
        {
          "label": "Pro",
          "value": "pro"
        },
        {
          "label": "Enterprise",
          "value": "enterprise"
        }
      ]
    }
  ]
}

✓ valid JSON · 4 control(s)

Rendered output valid() → false

// form.value() - signal, live

{"firstName":null,"age":null,"employed":null,"plan":null}

Try it out.