Kendo UI for Vue SegmentedControl Overview
Updated on Apr 23, 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.
Change Theme
Theme
Loading ...
Key Features
- Controlled and Uncontrolled Modes—The SegmentedControl supports both controlled mode (using the
valueprop) and uncontrolled mode (using thedefaultValueprop). - Appearance—You can adjust the size and layout mode of the SegmentedControl.
- Customization—Use the
itemTemplateprop to fully customize the appearance of each item. - Disabled Items—You can disable individual segments to prevent interaction.
- Keyboard Navigation—The SegmentedControl supports keyboard navigation for accessibility.
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