New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

ASP.NET MVC SegmentedControl Overview

Updated on Mar 24, 2026

The Telerik UI SegmentedControl HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI SegmentedControl component.

The SegmentedControl renders a group of buttons that allow the user to select a single option from a set of mutually exclusive choices. Each button represents one segment and can display a text label, an icon, or both.

Demo page for the SegmentedControl

Initializing the SegmentedControl

The following example demonstrates how to initialize the SegmentedControl.

Razor

@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .Items(items =>
    {
        items.Add().Text("Option 1").Value("option1");
        items.Add().Text("Option 2").Value("option2");
        items.Add().Text("Option 3").Value("option3");
    })
    .SelectedValue("option1")
)

Functionality and Features

Getting Started—Follow a step-by-step tutorial to set up the SegmentedControl for the first time.
Layout Modes—Choose between Compact mode, where each segment sizes to its content, and Stretch mode, where all segments share the container width equally.
Icons—Enhance segment buttons with icons from the Kendo UI theme, custom CSS classes, or a combination of icons and text labels.
Events—Handle the Change event to execute custom logic when the user selects a different segment.
Keyboard Navigation—The SegmentedControl supports keyboard navigation for moving focus between buttons and activating the selected segment.

To learn more about the appearance, anatomy, and accessibility of the SegmentedControl, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

ASP.NET MVC SegmentedControl Overview

Initializing the SegmentedControl

Functionality and Features

Next Steps

See Also