{
  "entrypoint": "@nvidia-elements/forms/examples/simple.examples.json",
  "items": [
    {
      "id": "forms-examples-simple-quality-check",
      "name": "QualityCheck",
      "template": "<form nve-layout=\"column gap:lg pad:lg\">\n  <ui-quality-control value='{\"good\": true, \"fast\": true, \"cheap\": false}' name=\"quality\"></ui-quality-control>\n  <pre id=\"quality-control-value\"></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"#quality-control-value\");\n  const qualityControl = document.querySelector('ui-quality-control[name=\"quality\"]');\n  pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n  form.addEventListener(\"change\", (e) => {\n    pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n    console.log(\"change\", e.target.value, Object.fromEntries(new FormData(form)));\n  });\n  form.addEventListener(\"input\", (e) => {\n    pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n    console.log(\"input\", e.target.value, Object.fromEntries(new FormData(form)));\n  });\n</script>\n",
      "summary": "Quality control form with checkbox inputs and schema-based validation.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "forms-examples-simple-events",
      "name": "Events",
      "template": "<form id=\"simple-events-form\" nve-layout=\"column gap:lg pad:lg\">\n  <ui-quality-control name=\"quality\" value='{\"good\": true, \"fast\": true, \"cheap\": false}'></ui-quality-control>\n  <pre></pre>\n  <div nve-layout=\"row gap:sm\">\n    <button type=\"button\">set invalid value</button>\n    <button type=\"reset\">reset</button>\n    <button type=\"submit\">submit</button>\n    <label>\n      <input type=\"checkbox\" name=\"strict\" checked />\n      strict mode\n    </label>\n  </div>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#simple-events-form\");\n  const pre = form.querySelector(\"pre\");\n  const button = form.querySelector(\"button\");\n  const qualityControl = form.querySelector('[name=\"quality\"]');\n  const strict = form.querySelector('[name=\"strict\"]');\n  pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n  strict.addEventListener(\"change\", (e) => {\n    qualityControl.constructor.metadata.strict = e.target.checked;\n  });\n  button.addEventListener(\"click\", () => {\n    qualityControl.value = { good: true, fast: true, cheap: true };\n    console.log(\"click\", qualityControl.value);\n  });\n  form.addEventListener(\"change\", (e) => {\n    pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n    console.log(\"change\", e.target.value);\n  });\n  form.addEventListener(\"input\", (e) => {\n    pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n    console.log(\"input\", e.target.value);\n  });\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n    console.log(\"submit\", Object.fromEntries(new FormData(form)));\n  });\n  form.addEventListener(\"reset\", (e) => {\n    // reset event fires before the value is reset\n    setTimeout(() => {\n      pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n      console.log(\"reset\", Object.fromEntries(new FormData(form)));\n    });\n  });\n  qualityControl.addEventListener(\"invalid\", (e) => {\n    console.log(\"invalid\", Object.fromEntries(new FormData(form)));\n  });\n</script>\n",
      "summary": "Quality control form events with strict mode toggle and invalid state handling.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}