Skip to content

radio_content

The radio_content macro is used to render a label along an optional description and hint for radio control. It it used by the radio macro but can also be used alone to have more control over how the switch is being rendered.

Definition

{% radio_content(options) %}

Input parameters

options

object represents an object of radio options and attributes:

Option key Type Default Required Description
options.id string "" yes Id attribute of the radio
options.label string "" yes The label of the radio
options.description string "" no If set, additional description below the label will be rendered
options.hintContent string "" no If set, additional hint next to the label will be rendered

Example

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

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="radio">
                {{ radio_content({
                    id: 'agreement',
                    label: 'Agreement'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a radio content additionally with a radio_control 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_content.twig" import radio_content %}
{% 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: 'agreement',
                    name: 'agreement'
                }) }}

                {{ radio_content({
                    id: 'agreement',
                    label: 'Agreement'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a radio content with a description

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="radio">
                {{ radio_content({
                    id: 'agreement',
                    label: 'Agreement',
                    description: 'By agreeing you accept the Terms of Service'
                }) }}
            </div>
        </div>
    </div>
</div>

Example

In this example we render a radio content with a hint

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="radio">
                {{ radio_content({
                    id: 'display-home-page-link',
                    label: 'Home page link',
                    hint: 'Clickable text that redirects to the home page.'
                }) }}
            </div>
        </div>
    </div>
</div>

Macro source code

{% macro radio_content(options) %}
    <div class="radio__content">
        {% if options.hintContent %}
            <h-hint>
                <label
                    class="label"
                    for={{ options.id }}>
                        {{ options.label }}
                </label>

                <h-hint-content>
                    {{ options.hintContent }}
                </h-hint-content>
            </h-hint>
        {% else %}
            <label
                class="label"
                for={{ options.id }}>
                    {{ options.label }}
            </label>
        {% endif %}

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

Form reference