Skip to content

radio_box

The radio_box macro is used to render a special type of radio that looks like a box.

Definition

{% radio_box(options) %}

Input parameters

options

options parameter represents an object of radio attributes

Option key Type Default Required Description
options.id string "" yes Id of the radio box
options.name string "" yes Name attribute of the radio
options.value string "" no Value attribute of the radio
options.checked boolean false no If set to true, checked attribute and appropriate styling class will be added to the radio box
options.required boolean false no If set to true, required attribute and appropriate styling class will be added to radio box
options.hidden boolean false no If set to true, hidden attribute and appropriate styling class will be added to radio box
options.readonly boolean false no If set to true, readonly attribute and appropriate styling class will be added to radio box
options.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to radio box
options.clickable boolean false no If set to true, clickable attribute and appropriate styling class will be added to radio box
options.error boolean false no If set to true, appropriate styling class will be added to radio box
options.label string "" no If set, label will be rendered with the radio box.
options.dataSet object null no A key value object with additional custom parameters added to the <radio> element
options.hintContent string "" no If set, additional hint will be rendered next to the label
options.classNames string "" no Additional classes that will be added to the radio box element

Example

In this example we render a standard radio box with an additional label and required parameter set to true.

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

radio_box({
    id: 'agreement',
    label: 'Default agreement',
    name: 'agreement-example',
    required: true
})

Macro source code

{% macro radio_box(options) %}
    <div class="radio-box
        {% if options.error %}radio-box_error{% endif %}
        {% if options.disabled %}radio-box_disabled{% endif %}
        {{ options.classNames|join(' ') }}
        "
    >
        <input
            type="radio"
            id="{{ options.id }}"
            name="{{ options.name }}"

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

            class="radio-box__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 %}/>

        {% if options.hintContent %}
            <h-hint tabindex="0">
                <label class="radio-box__label" for="{{ options.id }}">{{ options.label }}</label>
                <h-hint-content>
                    {{ options.hintContent }}
                </h-hint-content>
            </h-hint>
        {% else %}
            <label class="radio-box__label" for="{{ options.id }}">{{ options.label }}</label>
        {% endif %}
    </div>
{% endmacro %}

Form reference