Skip to content

control_checkbox

The control_checkbox macro is used to render a checkbox wrapped in control connector and other elements necessary to use it as a form element.

Definition

{% control_checkbox(options) %}

Input parameters

options

options parameter represents an object of the following attributes:

Option key Type Default Required Description
options.id string "" yes Id attribute of the checkbox
options.name string "" yes Name attribute of the checkbox
options.label string "" yes A label of the checkbox
options.value string "" no Value attribute of the checkbox
options.error boolean false no If set to true error styling will be added to the checkbox
options.checked boolean false no If set to true a checked attribute will be added to the checkbox
options.required boolean false no If set to true a required attribute will be added to the checkbox
options.hidden boolean false no If set to true a hidden attribute will be added to the checkbox
options.readonly boolean false no If set to true a readonly attribute will be added to the checkbox
options.disabled boolean false no If set to true a disabled attribute will be added to the checkbox
options.description string "" no If set, additional description will be rendered below the label
options.dataAttributes object null no Key value object of custom attributes that will be added to the checkbox

Example

In this example we render a basic control checkbox

{% from "@macros/control_checkbox.twig" import control_checkbox %}

{{ control_checkbox({
    id: 5,
    name: "tos",
    label: "I agree",
}) }}

Example

In this example we render a required and disabled control checkbox with additional description

{% from "@macros/control_checkbox.twig" import control_checkbox %}

{{ control_checkbox({
    id: 5,
    name: "tos",
    label: "I agree",
    required: true,
    disabled: true,
    description: "By checking this box you accept the Terms of Service"
}) }}

Example

In this example we render a checked control checkbox with a set of custom data attributes

{% from "@macros/control_checkbox.twig" import control_checkbox %}

{{ control_checkbox({
    id: 5,
    name: "tos",
    label: "I agree",
    checked: true,
    dataAttributes: {
        'data-url': 'https://example.com',
        'data-has-description': false 
    }
}) }}

Macro source code

{% macro control_checkbox(options) %}
    {% from "@macros/checkbox.twig" import checkbox %}

    <control-connector
        class="control {% if options.noMargin %} control_no-margin {% endif %}"
        {% if options.hidden %} hidden {% endif %}
    >
        <h-control>
            <h-control-content class="control">
                <h-control-element class="control__element">
                    {{ checkbox(options) }}
                </h-control-element>

                <control-errors></control-errors>
            </h-control-content>
        </h-control>
    </control-connector>
{% endmacro %}

Form reference

Macros reference

Webcomponents reference