checboxes doesn't add checked attribute

Question

Having some problems overriding the Grav CMS checboxes. The problem is that checked attribute doesn't appear. For this purpose Grav uses the {% if checked %}checked="checked"{% endif %} in twig template. But it doesn't work. Just nothing is added after a click.

It doesn't work with my code.

The overridden themes/child-theme/templates/forms/fields/checkboxes/checkboxes.html.twig

{% extends "forms/field.html.twig" %}

{% set originalValue = value %}
{% set value = (value is null ? field.default : value) %}
{% if field.use == 'keys' and field.default %}
    {% set value = field.default|merge(value) %}
{% endif %}

{% block global_attributes %}
    {{ parent() }}
    data-grav-keys="{{ field.use == 'keys' ? 'true' : 'false' }}"
    data-grav-field-name="{{ (scope ~ field.name)|fieldName }}"
{% endblock %}

{% block input %}
    {% for key, text in field.options %}

        {% set id = field.id|default(field.name)|hyphenize ~ '-' ~ key %}
        {% set name = field.use == 'keys' ? key : id %}
        {% set val = field.use == 'keys' ? '1' : key %}
        {% set checked = (field.use == 'keys' ? value[key] : key in value) %}
        {% set help = (key in field.help_options|keys ? field.help_options[key] : false) %}

        <div class="checkboxes {{ form_field_wrapper_classes }} {{ field.wrapper_classes }}">
            <input type="checkbox"
                   id="{{ id|e }}"
                   value="{{ val|e }}"
                   name="{{ (scope ~ field.name)|fieldName ~ '[' ~ name ~ ']' }}"
                   class="{{ form_field_checkbox_classes }} {{ field.classes }}"
                   {% if checked %}checked="checked"{% endif %}
                   {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
            >
            <label style="display: inline" for="{{ id|e }}">
                {% if help %}
                    <span class="hint--bottom" data-hint="{{ help|t|e('html_attr') }}">{{ text|t|e }}</span>
                {% else %}
                    {{ text|t|e }}
                {% endif %}
            </label>
        </div>
    {% endfor %}
{% endblock %}

The checkbox definitions in md

        -
            name: planner_project_type_checkbox
            type: checkboxes
            label: false
            options:
                Text Option: 'Text Value'
                Text Option: 'Text Value'
                Text Option: 'Text Value'
            outerclasses: 'fields-group-controls onyx-checkboxes'
            classes: onyx-checkboxes

DOM elements, no checked="checked" after click:

Nor with quark theme. Checkboxes definitions:

---
form:
    name: myform
    fields:
        -
            name: myField
            type: checkboxes
            options:
              option1: Option 1
              option2: Option 2         
---

DOM elements, no checked="checked" after click:

Answer 1

"DOM elements, no checked="checked" after click"

That's how a checkbox works by design... See MDN docs about the checkbox

checked
A Boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)

Note: "indicating whether or not this checkbox is checked by default"

Also, try the checkbox sample at the top of the page. There is no change in the DOM when the checkbox is checked or unchecked.