Kendo UI for Vue
Vue SegmentedControl
- Display a small set of mutually exclusive options with the Kendo UI for Vue SegmentedControl.
- Part of the Kendo UI for Vue library along with 110+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, learning resources and more!
-
Simplified Options Switching
The Kendo UI for Vue Segmented Control enables you to display a small set of mutually exclusive options. It renders a group of buttons where only one item can be selected at a time, with a sliding indicator that clearly shows the current selection. This UI component makes it a good alternative to radio buttons or dropdowns when space is limited and quick switching is important.
-
Controlled Mode
The SegmentedControl supports a controlled mode, giving you explicit control over which option is selected at any time. Instead of relying on internal state, you manage the selected value directly in your Vue component and update it in response to user interaction.
See the Kendo UI for Vue SegmentedControl controlled mode demo
-
Layout Mode
Select how options are sized and distributed, so you can match the layout to your design and content. You can define whether items take only the space they need or expand to fill the available width.
The Kendo UI for Vue SegmentedControl supports two straightforward modes:
- Compact (default): Each item is sized based on its content
- Stretch: All items expand evenly to fill the container
- This flexibility helps you create interfaces that are both space-efficient and visually balanced
-
Customization
The SegmentedControl in Kendo UI for Vue gives you full control over how each item is rendered, making it easy to go beyond the default look and tailor the component to your exact needs by combining elements like icons, labels, badges, or additional metadata.
See the Kendo UI for Vue Segmented Control customization demo
-
Disabled Segments
Disable individual options when they are not available or relevant. By setting the disabled property to true for specific items in the configuration, you can prevent selection and clearly communicate limitations to users.
See the Kendo UI for Vue Segmented Control disabled segments demo
-
Appearance
Adjust how the Kendo UI or Vue Segmented Control looks and behaves, so it fits naturally into different layouts and UI contexts. You can control the overall size of the control using the size property, with three available options: small, medium (default) and large. In addition to sizing, each item can include icons or combine icons with text. For more advanced styling, you can apply a custom class to the active icon using iconClassName, making it easy to highlight the selected state visually.
-
Keyboard Navigation
The Kendo UI for Vue SegmentedControl includes keyboard navigation support, allowing users to move between options and make selections without using a mouse.
See the Kendo UI for Vue SegmentedControl keyboard navigation demo
Get Started with Kendo UI for Vue
