UI for Blazor
Blazor Segmented Control
- The Blazor Segmented Control is a space-efficient component for mutually exclusive selection between related options.
- Part of the Telerik UI for Blazor library along with 120+ professionally-designed UI components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
Compact Choice Selection
The Telerik UI for Blazor Segmented Control 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 Blazor application.
See the Telerik UI for Blazor Segmented Control overview demo
-
Items Width Modes
The Blazor Segmented Control 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 (default): 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 Telerik UI for Blazor Segmented Control layout modes demo
-
Icons
Enhance the Telerik UI for Blazor Segmented Control with support for icons, text, or combined content in each segment, enabling clear and intuitive user interfaces. The component ensures proper alignment and spacing for all combinations and integrates seamlessly with the Telerik SVG Icon component, supporting both built-in and custom icons. For icon-only scenarios, tooltip support helps maintain clarity and accessibility while preserving a clean visual design.
-
Templates
Customize the Telerik UI for Blazor Segmented Control using the ItemTemplate to control the content of each segment. The template replaces the default rendering (icon and text) while preserving the underlying button element, ensuring consistent behavior.
See the Telerik UI for Blazor Segmented Control templates documentation
-
Appearance
Control the visual appearance of the Telerik UI for Blazor Segmented Control, 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 Telerik UI for Blazor Segmented Control appearance documentation
-
Keyboard Navigation
The Blazor Segmented Control includes keyboard navigation support, allowing users to move between options and make selections without using a mouse.
See the Telerik UI for Blazor Segmented Control keyboard navigation demo
