diff --git a/data/index.html b/data/index.html
index 4406531..d9afaf5 100644
--- a/data/index.html
+++ b/data/index.html
@@ -91,7 +91,7 @@
                         <span>Output</span>
                         <input
                             type="checkbox"
-                            name=" direction-1"
+                            name="direction-1"
                             id="input-direction-1"
                             data-value-not-checked="output"
                             data-value-checked="input"
diff --git a/data/load-data.js b/data/load-data.js
index 2ae6f1e..be369aa 100644
--- a/data/load-data.js
+++ b/data/load-data.js
@@ -22,8 +22,13 @@ function writeDataToInput(data) {
     console.log("write data", typeof data);
     for (const [key, value] of Object.entries(data)) {
         const element = document.querySelector(`[name=${key}]`);
-        console.log(element);
-        element.value = value;
+        console.log(key, element);
+
+        if (element.type === "checkbox") {
+            element.checked = value;
+        } else {
+            element.value = value;
+        }
     }
     // send "change" event
     form.dispatchEvent(new Event("change", { bubbles: true }));