Contact form

A card-wrapped form with a two-way bound field, a checkbox, live email validation, and a submit that dispatches an action once the checks pass.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Card",          "child": "col"        },        {          "id": "col",          "component": "Column",          "children": [            "title",            "email",            "subscribe",            "submit"          ]        },        {          "id": "title",          "component": "Text",          "text": "Contact us",          "variant": "title"        },        {          "id": "email",          "component": "TextField",          "label": "Email",          "value": {            "path": "/email"          },          "checks": [            {              "call": "email",              "args": {                "value": {                  "path": "/email"                }              },              "message": "Enter a valid email."            }          ]        },        {          "id": "subscribe",          "component": "Checkbox",          "label": "Subscribe to updates",          "value": {            "path": "/subscribe"          }        },        {          "id": "submit_label",          "component": "Text",          "text": "Send message"        },        {          "id": "submit",          "component": "Button",          "variant": "primary",          "child": "submit_label",          "action": {            "event": {              "name": "submit",              "context": {                "email": {                  "path": "/email"                }              }            }          },          "checks": [            {              "call": "required",              "args": {                "value": {                  "path": "/email"                }              },              "message": "Email is required."            }          ]        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "email": "",        "subscribe": false      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Card",
          "child": "col"
        },
        {
          "id": "col",
          "component": "Column",
          "children": [
            "title",
            "email",
            "subscribe",
            "submit"
          ]
        },
        {
          "id": "title",
          "component": "Text",
          "text": "Contact us",
          "variant": "title"
        },
        {
          "id": "email",
          "component": "TextField",
          "label": "Email",
          "value": {
            "path": "/email"
          },
          "checks": [
            {
              "call": "email",
              "args": {
                "value": {
                  "path": "/email"
                }
              },
              "message": "Enter a valid email."
            }
          ]
        },
        {
          "id": "subscribe",
          "component": "Checkbox",
          "label": "Subscribe to updates",
          "value": {
            "path": "/subscribe"
          }
        },
        {
          "id": "submit_label",
          "component": "Text",
          "text": "Send message"
        },
        {
          "id": "submit",
          "component": "Button",
          "variant": "primary",
          "child": "submit_label",
          "action": {
            "event": {
              "name": "submit",
              "context": {
                "email": {
                  "path": "/email"
                }
              }
            }
          },
          "checks": [
            {
              "call": "required",
              "args": {
                "value": {
                  "path": "/email"
                }
              },
              "message": "Email is required."
            }
          ]
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "email": "",
        "subscribe": false
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Subscribe to updates