Skip to content

radio

The radio macro is used to render a radio control with an additional label, hint or description.

Definition

{% radio(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.name string "" yes Name attribute of the radio
options.error boolean false no If set to true, appropriate styling class will be added to the radio
options.checked boolean false no If set to true, checked attribute and appropriate styling class will be added to the radio
options.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to radio
options.required boolean false no If set to true, required attribute and appropriate styling class will be added to radio
options.readonly boolean false no If set to true, readonly attribute and appropriate styling class will be added to radio
options.hidden boolean false no If set to true, hidden attribute and appropriate styling class will be added to radio
options.value string "" no Value attribute of the radio
options.label string "" no If set, a label will be rendered with the radio.
options.description string "" no If set, an additional description will be rendered below the label
options.dataSet object null no A key value object with additional custom parameters added to the radio element
options.variant string "" no A variant of the radio, currently there is one supported variant: box

Example

In this example we render a radio with label

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

{{ radio({
    id: 'answer-one',
    name: 'question',
    value: '1',
    label: 'answer 1'
}) }}

Example

In this example we render a hidden radio with custom attribute passed with dataSet attribute

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

{{ radio({
    id: 'answer-two',
    name: 'question',
    value: '2',
    label: 'answer 2',
    hidden: true,
    dataSet: {
        'my-custom-attribute': 'custom value'
    }
}) }}

Macro source code

{% macro radio(options) %}
    {% from "@macros/radio_control.twig" import radio_control %}
    {% from "@macros/radio_box.twig" import radio_box %}
    {% from "@macros/radio_content.twig" import radio_content %}

     {% if options.variant == 'box' %}
        {{ radio_box(options) }}
     {% else %}
        <div class="radio {% if options.error %}radio_error{% endif %} {% if options.disabled %}radio_disabled{% endif %}">
             {{ radio_control(options) }}

             {{ radio_content(options) }}
         </div>
     {% endif %}
{% endmacro %}

Form reference