Kendo UI for Vue SegmentedControl Overview
Updated on Nov 11, 2026
The Kendo UI for Vue SegmentedControl displays a horizontal set of mutually exclusive buttons, allowing users to select a single option from a group. It is ideal for switching between views, modes, or filter states.
The Kendo UI for Vue SegmentedControl is distributed through the kendo-vue-buttons NPM package.
Start Free Trial
The following example demonstrates the SegmentedControl in action.
Loading ...
Key Features
- Binding Items—Define the collection of items rendered by the SegmentedControl.
- Controlled Mode—The SegmentedControl supports both controlled mode (using the
valueprop) and uncontrolled mode (using thedefaultValueprop). - Appearance—Configure the size of the SegmentedControl.
- Layout Mode—Switch between compact and stretch layout modes to control how items are sized.
- Disabled Items—Disable individual items to prevent user interaction.
- Icon Options—Use SVG icons with text or provide accessible names for icon-only items.
- Customization—Use the
itemTemplateprop to fully customize the appearance of each item.
Kendo UI for Vue SegmentedControl APIs
Support and Learning Resources
- SegmentedControl Homepage
- API Reference of the SegmentedControl Component
- Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code