SelectBar
Demonstration and configuration of the Radzen Blazor SelectBar component.
These demos showcase a segmented button bar with two-way data binding, single or multiple selection modes, data-bound items, statically declared items, programmatically populated items with disabled states, icon and image support, custom templates, configurable sizes, and horizontal/vertical orientation options.
Get and Set the value of SelectBar link
As all Radzen Blazor input components the SelectBar has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.
Name | Action |
|---|---|
| Animal Action | |
| Animal Action |
Get and Set the value of SelectBar using Value and Change event link
Value property can be used to set the value of the component and Change event to get the user input.
Multiple selection link
Use Multiple="true" to enable selection of multiple items in the SelectBar.
Populate SelectBar items from data link
Use the Data property to dynamically populate SelectBar items from a collection.
Statically declared and populated SelectBar items from data link
Combine statically declared items with data-bound items for flexible SelectBar configurations.
Populate items programmatically and disable item link
Use loops to programmatically create SelectBar items and set individual items as disabled.
SelectBar with icons link
Use the Icon property on SelectBar items to display icons alongside or instead of text.
SelectBar with images link
Use the ImageUrl property on SelectBar items to display images in the selection buttons.
SelectBar with template link
Use the Template property to fully customize the appearance of SelectBar items.
SelectBar Size link
Use the Size property to control the size of the SelectBar buttons (ExtraSmall, Small, Medium, Large).
SelectBar Orientation link
Use the Orientation property to display SelectBar items horizontally or vertically.
Keyboard Navigation link
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor SelectBar component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to a SelectBar item. |
| Shift + Tab | Navigate to a previous SelectBar item. |
| Space or Enter | Select the focused SelectBar item. |
| Space or Enter with multiple selection enabled | Toggle selection of the focused SelectBar item. |
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT