Lava Shortcode - Checkbox List

Description

Display a list of checkboxes for multiple selections.

Documentation

This control displays a checkbox list.

Example Usage

{[ checkboxlist label:'Favorite Colors' name:'favorite-colors' 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]]
{[ endcheckboxlist ]}

Parameters

Below are the parameters for the checkbox list shortcode.

• label - The label to display above the control.
• showlabel (true) - Whether to display label.
• name (checkbox) - The name for the Checkbox list picker control.
• value - The currently selected values.
• controltype (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 a value.) - Message to display when the value is not valid.
• additionalattributes - Additional attributes that you want to add to the input controls (not each checkbox control will get these attributes).

Markup

{% assign isrequired = isrequired | AsBoolean %}
{% assign sc-values =  value | Split:',',true %}

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

    <div class="controls js-rockcheckboxlist rock-check-box-list rockcheckboxlist rockcheckboxlist-horizontal in-columns in-columns-{{ columns }} cbl-{{ name }} {% if isrequired == true %}required{% endif %}">
        {% for item in items %}

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

        {% endfor %}
    </div>

{[ endrockcontrol ]}