Skip to content

radio_control

The radio_control macro is used to render a html radio control. It is a sub macro used internally in a radio base macro. We can use only the base macro, but if we want to have a more control on how the control is rendered we can use each sub macro separately.

Definition

{% radio_control(options) %}

Input parameters

options

options parameter represents an object of input 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.name string "" yes Name attriboute of the radio
options.checked boolean false no If set to true checked attribute will be added to the radio
options.clickable boolean false no If set to true the disabled option will be omitted
options.disabled boolean false no If set to true disabled attribute will be added to radio
options.required boolean false no If set to true required attribute will be added to radio
options.readonly boolean false no If set to true readonly attribute will be added to radio
options.hidden boolean false no If set to true hidden attribute will be added to radio
options.value string "" no Value attribute of the radio
options.dataSet object null no A key value object of custom attributes added to the radio control

Example

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

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="radio">
                {{ radio_control({
                    id: 'answer-1',
                    name: 'answer'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a radio control additionally with a radio_content macro. It is basically how the radio 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/radio_control.twig" import radio_control %}
{% from "@macros/radio_content.twig" import radio_content %}

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="radio">
                {{ radio_control({
                    id: 'answer-1',
                    name: 'answer'
                }) }}

                {{ radio_content({
                    id: 'answer-1',
                    label: '3 months'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

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

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="radio">
                {{ radio_control({
                    id: 'answer-1',
                    name: 'answer',
                    checked: true,
                    disabled: true,
                    value: 'answer'
                }) }}
            </div>
        </div>
    </div>
</div>

Macro source code

{% macro radio_control(options) %}
    <div class="radio__control">
        <input
            type="radio"
            id="{{ options.id }}"
            name="{{ options.name }}"

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

            class="radio__input"

            {% if options.dataSet is defined %}
                {% for key,value in options.dataSet %}
                    {% if value is defined and value is not null %}
                        {{ key }}="{{ value }}"
                    {% endif %}
                {% endfor %}
            {% endif %}

            {% if options.checked %}checked{% endif %}
            {% if options.required %}required{% endif %}
            {% if options.hidden %}hidden{% endif %}
            {% if options.readonly %}readonly{% endif %}
            {% if options.disabled and not options.clickable %}disabled{% endif %}/>

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

Form reference