# Kendo UI for Vue SegmentedControl Overview

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](https://www.npmjs.com/package/@progress/kendo-vue-buttons).

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the SegmentedControl in action.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/segmentedcontrol/basic-uncontrolled/source.txt)

## Key Features

* [Binding Items](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/items)—Define the collection of items rendered by the SegmentedControl.
* [Controlled Mode](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/controlled-mode)—The SegmentedControl supports both controlled mode (using the [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops#value) prop) and uncontrolled mode (using the [`defaultValue`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops#defaultvalue) prop).
* [Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/appearance)—Configure the size of the SegmentedControl.
* [Layout Mode](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/layout-mode)—Switch between compact and stretch layout modes to control how items are sized.
* [Disabled Items](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/disabled)—Disable individual items to prevent user interaction.
* [Icon Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/icons)—Use SVG icons with text or provide accessible names for icon-only items.
* [Customization](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/customization)—Use the [`itemTemplate`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops#itemtemplate) prop to fully customize the appearance of each item.

## Kendo UI for Vue SegmentedControl APIs

* [Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/segmentedcontrol/appearance)
* [API Reference of the SegmentedControl](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops)
* [API Reference of the SegmentedItemProps](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmenteditemprops)

## Support and Learning Resources

* [SegmentedControl Homepage](https://www.telerik.com/kendo-vue-ui/segmentedcontrol)
* [API Reference of the SegmentedControl Component](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/segmentedcontrolprops)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)