Kendo UI for jQuery SegmentedControl Overview

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

index.html

Also available for:

Create Your Account

Profile Type

Personal For individual use - share basic information, preferences, and connect with others.

$(document).ready(function() { $("#segmentedControl").kendoSegmentedControl({ selectedValue: "personal", layoutMode: "compact", size: "medium", items: [ {text: "Personal", value: "personal" }, {text: "Business", value: "business"}, {text: "Education", value: "education", enabled: false} ], change: onChange }) }); function onChange(e) { var item = e.item; var value = e.value; var text = item.text; var hint = ""; switch (value) { case "personal": hint = "For individual use - share basic information, preferences, and connect with others."; break; case "business": hint = "For companies or organizations - showcase services, contact details, and professional information."; break; case "education": hint = "For educational institutions or learning-focused profiles - present programs, courses and academic information."; break; } $("#selected-text").html("<strong class='k-font-size-sm k-mt-4'>" + text + "</strong><span class='hint k-font-size-sm k-font-italic k-mt-1.5'>" + hint + "</span>"); } #segmentedControl { width: 80%; } .demo-wrapper { grid-template-columns: 180px 1fr; } /* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */ @media (max-width: 678px), (min-width: 838px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) { .demo-wrapper { grid-template-columns: 1fr; } .avatar { display: block !important; } .side-container { display: none !important; } .main-container { padding-bottom: 0; } .content-expanded { border-end-end-radius: 0; border-end-start-radius: 0; } } /* Breakpoint for full screen demo: max:359px */ @media (max-width: 476px) { .avatar { width: 32px; height: 32px; } }

The SegmentedControl component is part of Kendo UI for jQuery, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Description

The Kendo UI for jQuery 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.

The current demo shows a basic implementation of the SegmentedControl with several items and a pre-selected value.

Functionality and Features

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–You can subscribe to the Change event and implement 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.

Kendo UI for jQuery SegmentedControl Overview

Description

Support & Learning Resources

Additional Resources