Checkbox value can be unset

assets/js/app/editor/Components/Checkbox.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <div :class="['custom-control', 'custom-' + mode]">
+            <input
+                :id="id"
+                class="custom-control-input"
+                :name="name"
+                :checked="value"
+                type="checkbox"
+                :readonly="readonly"
+                @change="liveValue = $event.target.checked"
+            />
+            <label class="custom-control-label" :for="name">{{ label }}</label>
+
+            <!-- This hidden input is actually what gets submitted. It submits "true" when checked, and "false" when not checked -->
+            <!-- It exists because we need an "unchecked" value submitted. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox -->
+            -->
+            <input type="hidden" :value="liveValue" :name="name" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'EditorCheckbox',
+    props: {
+        value: {
+            type: Boolean,
+        },
+        name: {
+            type: String,
+        },
+        id: {
+            type: String,
+        },
+        required: {
+            type: Boolean,
+        },
+        readonly: {
+            type: Boolean,
+        },
+        label: {
+            type: String,
+        },
+        mode: {
+            type: String,
+        },
+    },
+    data() {
+        return {
+            liveValue: this.value,
+        };
+    },
+};
+</script>

assets/js/app/editor/index.js

@@ -24,7 +24,9 @@ import Language from './Components/Language';
 import File from './Components/File';
 import Filelist from './Components/Filelist';
 import Collection from './Components/Collection';
+import Checkbox from './Components/Checkbox';
 
+Vue.component('editor-checkbox', Checkbox);
 Vue.component('editor-date', Date);
 Vue.component('editor-embed', Embed);
 Vue.component('editor-email', Email);

src/Entity/Field/CheckboxField.php

@@ -15,6 +15,23 @@ class CheckboxField extends Field implements FieldInterface, ScalarCastable, Raw
 {
     public const TYPE = 'checkbox';
 
+    public function setValue($value): Field
+    {
+        switch ($value) {
+            // String values come from the ContentEditController.
+            case 'true':
+                $value = true;
+                break;
+            case 'false':
+                $value = false;
+                break;
+            default:
+                $value = $value ? true : false;
+        }
+
+        return parent::setValue($value);
+    }
+
     public function getTwigValue()
     {
         return current($this->getValue());

templates/_partials/fields/checkbox.html.twig

@@ -6,14 +6,14 @@
         {% set mode = field.definition.mode|default('checkbox') %}
     {% endif %}
 
-    <div class="custom-control custom-{{ mode }}">
-        {# What the heck is this hidden field for, you might wonder? Well, it's
-           here to make sure an unchecked checkbox still shows up in the server
-           response, so we can handle it there, if present. #}
-        <input type="hidden" name="{{ name }}" value="{{ value ? 'checked' }}">
-        <input class="custom-control-input" id="{{ name }}" name="{{ name }}" type="checkbox"
-               value="1" {{ value ? 'checked' }} {% if readonly %}disabled{% endif %}>
-        <label class="custom-control-label" for="{{ name }}">{{ label }}</label>
-    </div>
+    <editor-checkbox
+        :id="{{ name|json_encode }}"
+        :value="{{ value|json_encode }}"
+        :name="{{ name|json_encode }}"
+        :required="{{ required|json_encode }}"
+        :readonly="{{ readonly|json_encode }}"
+        :label="{{ label|json_encode }}"
+        :mode="{{ mode|json_encode }}"
+    ></editor-checkbox>
 {% endblock %}