Progress Telerik UI for Blazor
RadioGroup
- The Blazor RadioGroup control shows a data bound collection of options displayed as radio buttons—an alternative to a dropdown or select element.
- This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
- The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
-
Overview
There are many ways to select a single option from a predefined list of options, but none is as classic as the Telerik UI for Blazor RadioGroup component. Bind this control directly to the list of choices and it will automatically render all of them while allowing for complete customization and keyboard navigation.
Check out the Blazor Radio Button Group demo
-
Data Binding
Similarly, to the rest of our suite, the component can be bound to both primitive types and to models. This mean setup is really simple – you only need to pass an IEnumerable<T> of your type to get things going and the component will do the rest. On the other hand, should you need to have different values for each item’s value and display text, you can bind the RadioGroup to a model in your application. Examples of both are given in our RadioGroup documentation page.
-
Labels & Orientation
The RadioGroup’s button can be laid out vertically (the default) or horizontally. Further, the labels on each item can be positioned before or after (the default) each button. These options help you fit the control in whatever input form you are building.
Blazor RadioGroup customization
-
TabIndex
The Blazor RadioGroup component, just like all other Telerik UI for Blazor input components, supports keyboard navigation to switch between components thanks to the HTML TabIndex property. Pressing Tab will normally focus the next available input component, the same way your users are accustomed to when standard HTML inputs are used. Having the TabIndex setting lets you customize that order. -
Events
Similarly, to the rest of the input selection components in the suite, the events ValueChanged and OnChange are triggered when a selection is made.
Learn more about the Blazor RadioGroup events -
Theming
The Telerik UI for Blazor RadioGroup has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.
-
Keyboard Navigation
The Telerik UI for Blazor RadioGroup component can be navigated through keyboard alone and the active selection can be chosen by keyboard too.
Next Steps
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Try Telerik UI for Blazor with dedicated technical support.