Skip to content

switch_control

The switch_control macro is used to render a switch control. It it used by the switch macro but can also be used alone to have more control over how the switch is being rendered.

Definition

{% switch_control(options) %}

Input parameters

options

object represents an object of switch options and attributes

Option key Type Default Required Description
options.id string "" yes Id attribute of the <input> element
options.name string "" yes Name attribute of the <input> element
options.checked boolean false no If set to true, checked attribute will be added to the switch
options.required boolean false no If set to true, required attribute will be added to switch
options.hidden boolean false no If set to true, hidden attribute will be added to switch
options.readonly boolean false no If set to true, readonly attribute will be added to switch
options.disabled boolean false no If set to true, disabled attribute will be added to switch
options.value string "" no Value attribute of the <input> element

Example

In this example we render a basic switch control. In all examples we will also use additional control classes and elements that help to style the input properly.

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="switch">
                {{ switch_control({
                    id: 'agreement',
                    name: 'agreement'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a switch control additionally with a switch_content macro. It is basically how the switch macro is structured inside but as mentioned before, this gives us more control over how the whole control is rendered in case we need it.

{% from "@macros/switch_control.twig" import switch_control %}
{% from "@macros/switch_content.twig" import switch_content %}

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="switch">
                {{ switch_control({
                    id: 'agreement',
                    name: 'agreement'
                }) }}

                {{ switch_content({
                    id: 'agreement',
                    label: 'I agree',
                    description: 'By agreeing you accept the Terms of Service'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a disabled and checked switch control with it's custom value.

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="switch">
                {{ switch_control({
                    id: 'question',
                    name: 'question',
                    checked: true,
                    disabled: true,
                    value: 'answer'
                }) }}
            </div>
        </div>
    </div>
</div>

Macro source code

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

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

            class="switch__input"

            {% 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 %}/>

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

Form reference