Skip to content

checkbox_content

The checkbox_content macro is used to render a label and optionally description for a checkbox control. It is macro used internally in a checkbox macro. We can use this macro if we want to have more control on how the control is rendered. However, using this macro out of checkbox control context is not recommended.

Definition

{% checkbox_content(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.label string "" no checkbox label
options.description string "" no description below label

Example

In this example we are using checkbox_control and checkbox_content macro to render a checkbox control instead of using just checkbox macro. This way we have more control on how the control is rendered.

{% 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_content(options) %}
    <div class="checkbox__content">
        <label
            class="label {% if options.required %} label_required {% endif %}"
            for={{ options.id }}>{{ options.label|raw }}</label>

        {% if options.description %}
            <div class="checkbox__description">
                {{ options.description }}
            </div>
        {% endif %}
    </div>
{% endmacro %}

Form reference