{
  "element": "[forms]",
  "entrypoint": "@nvidia-elements/forms/examples/csv.examples.json",
  "items": [
    {
      "id": "forms-examples-csv-csv",
      "name": "CSV",
      "template": "<style>\n  ui-csv-grid:invalid {\n    outline: 2px dashed red;\n  }\n</style>\n<form nve-layout=\"grid span:6 gap:lg pad:lg align:stretch align:center\" style=\"min-width: 1000px\">\n  <nve-textarea style=\"width: max-content\">\n    <label>CSV</label>\n    <textarea name=\"input\" rows=\"20\" cols=\"50\">${csv}</textarea>\n  </nve-textarea>\n  <nve-divider orientation=\"vertical\"></nve-divider>\n  <ui-csv-grid name=\"csv\"></ui-csv-grid>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  form.elements.csv.value = form.elements.input.value;\n  form.addEventListener(\"input\", (e) => {\n    form.elements.csv.value = form.elements.input.value;\n  });\n</script>\n",
      "summary": "CSV grid form control with input validation and editable textarea.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}