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

SegmentedControl Data Binding

Updated on Nov 11, 2026

The SegmentedControl renders its buttons from a collection of SegmentedItemProps objects that you pass to the items prop.

Item Fields

Each item in the array can define the following fields:

value—The unique identifier of the item. The SegmentedControl compares it with its value or defaultValue to determine the selected item. For more details, refer to the Controlled Mode article.
text—The text content of the button.
svgIcon—An SVG icon to render inside the button. For more details, refer to the Icon Options article.
iconClassName—A CSS class applied to the icon of the selected item.
disabled—Determines whether the button is disabled. For more details, refer to the Disabled Items article.
title—Sets the title attribute of the button.

The following example demonstrates how to bind a collection of items to the SegmentedControl.

Loading ...