Skip to content

switch

The switch macro is used to render a configurable switch control with an optional description.

Definition

{% switch(options) %}

Input parameters

options

options parameter represents an object of switch attributes:

Option key Type Default Required Description
options.id string "" yes Id attribute of the switch
options.name string "" yes Name attribute of the switch
options.error boolean false no If set to true, appropriate styling class will be added to the switch
options.checked boolean false no If set to true, checked attribute and appropriate styling class will be added to the switch
options.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to switch
options.required boolean false no If set to true, required attribute and appropriate styling class will be added to switch
options.readonly boolean false no If set to true, readonly attribute and appropriate styling class will be added to switch
options.hidden boolean false no If set to true, hidden attribute and appropriate styling class will be added to switch
options.value string "" no Value attribute of the switch
options.description string "" no If set, an additional description will be rendered
options.classNames string "" no A list of classes that will be added to the switch element

Example

In this example we render a basic switch

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

{{ switch({
    id: 'dark-mode-1',
    name: 'dark-mode'
}) }}

Example

In this example we render a disabled and checked switch with custom description

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

{{ switch({
    id: 'dark-mode-1',
    name: 'dark-mode',
    disabled: true,
    checked: true,
    description: 'Enable dark mode'
}) }}

Macro source code

{% macro switch(options) %}
    {% from "@macros/switch_control.twig" import switch_control %}
    {% from "@macros/switch_content.twig" import switch_content %}

    <div
        class="
            switch
            {% if options.error %}switch_error{% endif %}
            {% if options.disabled %}switch_disabled{% endif %}
            {{ options.classNames }}
        "
    >
        {{ switch_control(options) }}
        {{ switch_content(options) }}
    </div>
{% endmacro %}

Form reference