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

Items

configuration

Configures the different buttons that will be rendered inside the SegmentedControl.

items

Array

Default: []

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Option 1", value: "option1" },
    { text: "Option 2", value: "option2" }
  ]
});
</script>

items.enabled

Boolean

Configures whether an individual button can be enabled or disabled.

Default: true

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Option 1", value: "option1" },
    { text: "Option 2", value: "option2", enabled: false },
    { text: "Option 3", value: "option3" }
  ]
});
</script>

items.icon

String

Defines the name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the button.

Default: null

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Settings", icon: "gear", value: "settings" },
    { text: "Home", icon: "home", value: "home" }
  ]
});
</script>

items.iconClass

String

If set, value will be appended to the icon's element class attribute.

Default: null

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Settings", icon: "gear", value: "settings", iconClass: "customClass" },
    { text: "Home", icon: "home", value: "home" }
  ]
});
</script>

items.text

String

If set, the text will be rendered as the button label.

Default: null

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Option 1", value: "option1" },
    { text: "Option 2", value: "option2" }
  ]
});
</script>

items.value

String

Specifies the value that will act as an identifier for the button. Will be supplemented as a data-value attribute.

Default: null

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Option 1", value: "option1" },
    { text: "Option 2", value: "option2" }
  ]
});
</script>