Skip to content

checkbox_control

The checkbox_control macro is used to render a html checkbox control. It is a sub macro used internally in a checkbox base macro. We can use only the base macro, but if we want to have a more control on how the control is rendered we can use each sub macro separately.

Definition

{% macro checkbox_control(options) %}

Input parameters

options

object represents an object of checkbox attributes

Option key Type Default Required Description
options.id string "" yes form control id, used also as value for for attribute in a label element
options.name string "" yes checkox name attribute
options.error boolean false no if true checkbox is in error mode
options.checked boolean false no if true checkbox is checkced
options.disabled boolean false no if true checkbox is disabled
options.required boolean false no if true checkbox is required
options.readonly boolean false no if true checkbox is readonly
options.value string "" no checkbox value
options.partiallyChecked boolean false no if true checkbox is in partially checked state

Example

{% from "@macros/checkbox_control.twig" import checkbox_control %}
{% from "@macros/checkbox_content.twig" import checkbox_content %}

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="checkbox">
                {{ checkbox_control({
                    id: 'agreement',
                    name: 'agreement',
                    value: '1',
                    checked: true
                }) }}

                {{ checkbox_content({
                    id: 'agreement',
                    label: 'agreement',
                    description: 'nostrum quaerat quibusdam voluptatem!'
                }) }}
            </div>
        </div>
    </div>
</div>

Macro source code

{% macro checkbox_control(options) %}
    <div class="checkbox__control">
        <input
            type="checkbox"
            id="{{ options.id }}"
            name="{{ options.name }}"

            {% if options.value is defined %}
                value="{{ options.value }}"
            {%  endif %}

            autocomplete="off"
            class="checkbox__input {% if options.partiallyChecked %}checkbox__input_partially-checked{% endif %}"

            {% if options.checked %}checked{% endif %}
            {% if options.required %}required{% endif %}
            {% if options.hidden %}hidden{% endif %}
            {% if options.readonly %}readonly{% endif %}
            {% if options.disabled %}disabled{% endif %}

            {% for propName, propValue in options.dataAttributes %}
                data-{{ propName }}="{{ propValue }}"
            {% endfor %}/>

        <label
            class="checkbox__label"
            for="{{ options.id }}"></label>
    </div>
{% endmacro %}

Form reference