Lava Shortcode - Radio Button List

Description

Display a list of radio buttons for single-choice selection.

Documentation

This control displays a radio button list.

Example Usage

{[ radiobuttonlist label:'Favorite Color' name:'favorite-color' isrequired:'true' value:'2' columns:'4' ]}
    [[ item value:'1' text:'Red' ]][[ enditem]]
    [[ item value:'2' text:'Green' ]][[ enditem]]
    [[ item value:'3' text:'Blue' ]][[ enditem]]
    [[ item value:'4' text:'Orange' ]][[ enditem]]
    [[ item value:'5' text:'Yellow' ]][[ enditem]]
{[ endradiobuttonlist ]}

Parameters

Below are the parameters for the radio button list shortcode.

• label - The label to display above the control.
• showlabel (true) - Whether to display label.
• name (radiobuttonlist) - The name for the radio button list control.
• value - The currently selected values.
• type (rock-check-box-list) - The type of control. This is appended to the root form-group.
• columns - The number of colums to align the checkboxes to.
• isrequired (false) - Establishes whether making a selection is necessary.
• validationmessage (Please select at least one item.) - Message to display when the value is not valid.
• additionalattributes - Additional attributes to include on the input control.

Markup

{[ rockcontrol id:'rc-{{ '' | UniqueIdentifier }}' label:'{{ label }}' showlabel:'{{ showlabel }}' type:'{{ type }}' isrequired:'{{ isrequired }}' validationmessage:'{{ validationmessage }}' ]}

    <div class="controls js-rockradiobuttonlist rockradiobuttonlist  rockradiobuttonlist-horizontal in-columns in-columns-{{ columns }} {% if isrequired %}required{% endif %}">
        {% for item in items %}

            {% assign itemId = id | Append:'_' | Append:forloop.index0 %}
            {% assign isValueSelected = sc-values | Contains:item.value %}
            <label class="radio-inline" for="{{ itemId }}">
                <input id="{{ itemId }}" type="radio" name="{{ name }}" value="{{ item.value }}" {% if value == item.value %}checked="checked"{% endif %} {{ additionalattributes }}>
                <span class="label-text">{{ item.text }}</span></label>
        {% endfor %}
    </div>

{[ endrockcontrol ]}