Kendo UI for jQuery
jQuery Segmented Control
- The jQuery Segmented Control is a space-efficient component for mutually exclusive selection between related options.
- Part of the Kendo UI for jQuery library along with 120+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, learning resources and more!
-
Compact Choice Selection
The Kendo UI for jQuery SegmentedControl is a sleek, space-efficient component for fast, mutually exclusive selection between related options. Designed as a modern alternative to radio buttons and tabs, it improves usability by surfacing key choices in a single, intuitive control. With built-in support for icons, customization, accessibility, and responsive behavior, it fits seamlessly into any Kendo UI application.
-
Items Width Modes
The jQuery SegmentedControl supports configurable item widths, giving you precise control over how each segment is sized. This allows you to better accommodate different content lengths and maintain a consistent layout without additional styling.
- Compact mode: Items are sized based on their content, making this option suitable for segments with varying text length or icons.
- Stretch mode: All items expand evenly to fill the available width, ensuring a balanced appearance.
See the Kendo UI for jQuery Segmented Control layout modes demo
-
Icons
The Kendo UI for jQuery SegmentedControl supports flexible content configuration, allowing each segment to include a text label, an icon, or both. You can further customize the icon appearance by using the iconClass option to apply additional CSS classes.
-
Appearance
Control the visual appearance of the Kendo UI for jQuery SegmentedControl, including its button size and layout behavior. Use the size option to adjust the segment buttons to small, medium, or large, depending on your UI density needs.
See the Kendo UI for jQuery Segmented Control appearance demo
-
Events
The Kendo UI for jQuery SegmentedControl exposes a change event that triggers when the selected segment is updated. The event provides both the selected value and the full data object for the item, making it easy to access all relevant information in your handler.
-
Keyboard Navigation
The jQuery SegmentedControl includes keyboard navigation support, allowing users to move between options and make selections without using a mouse.
See the Kendo UI for jQuery Segmented Control keyboard navigation demo
