Skip to content

switch_content

The switch_content macro is used to render a label along an optional description for 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_content(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 switch
options.label string "" yes The label of the switch
options.description string "" no If set, additional description below the label will be rendered

Example

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

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="switch">
                {{ switch_content({
                    id: 'dark-mode',
                    label: 'Dark mode'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a switch content additionally with a switch_control 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_content.twig" import switch_content %}
{% 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: 'dark-mode',
                    name: 'darkmode'
                }) }}

               {{ switch_content({
                    id: 'dark-mode',
                    label: 'Dark mode'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a switch content with a description

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="switch">
                {{ switch_content({
                    id: 'dark-mode',
                    label: 'Dark mode',
                    description: 'This option makes the page dark to protect the eyes'
                }) }}
            </div>
        </div>
    </div>
</div>

Macro source code

{% macro switch_content(options) %}
    <div class="switch__content">
        <label
            class="label"
            for={{ options.id }}>{{ options.label }}</label>

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

Form reference