New to Kendo UI for jQuery? Start a free 30-day trial

Items

configuration

Array of items to be rendered as radio buttons in the RadioGroup. If the array contains objects, their fields will be used for each radio button. If the array contains strings, those will be used as both value and label of the respective radio button.

items

Array

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [ "one", "two", "three" ]
    });
</script>

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [{
            value: "one",
            label: "Label one"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.attributes

Object

Collection of key-value pairs that would be used to generate the attributes attached to each k-radio-item element.

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [{
            value: "one",
            label: "Label one",
            attributes: {
                "data-test": "custom"
            }
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.cssClass

String

Custom class that would be set on the respective k-radio-item element.

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [{
            value: "one",
            label: "Label one",
            cssClass: "custom-class"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.enabled

Boolean

Defines whether the radio button is enabled or not. By default all radio buttons are enabled.

Default: true

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [{
            value: "one",
            label: "Label one",
            enabled: false
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.encoded

Boolean

Determines whether the radio button label content should be rendered as an HTML string or it should be encoded.

Default: true

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [{
            value: "one",
            label: "<strong>Label one</strong>",
            encoded: false
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.label

String

Specifies the label content for the radio button.

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [{
            value: "one",
            label: "<strong>Label one</strong>"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.value

String

Specifies the value for the radio button.

<ul id="radiogroup"></ul>

<script>
    $("#radiogroup").kendoRadioGroup({
        items: [{
            value: "one",
            label: "<strong>Label one</strong>"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>