Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Basic Usage
Simple radio group with two-way binding.
Selected value: comfortable
Disabled State
Radio groups and individual items that cannot be interacted with.
Disabled Group
Individual Item Disabled
Selected: enabled1
Form Validation
Radio group integrated with Blazor's EditForm and validation.
Different Value Types
Radio groups support various data types through generics.
Integer Values
Selected: 2
Enum Values
Selected: Medium
With Container Background
Radio items within highlighted containers. Click anywhere in the container to select.
Perfect for getting started. Includes basic features.
For professionals. Unlimited features and priority support.
Selected plan: free
Accessibility
Keyboard navigation and screen reader support. Tab focuses the selected item (or first if none); arrow keys navigate and select; Space/Enter select the focused item. Disabled items are not focusable. ARIA attributes (role="radiogroup", role="radio", aria-checked) are set correctly.
Browser Compatibility
Tested and verified across modern browsers.
✓ Chrome 120+ (compatible)
✓ Firefox 120+ (compatible)
✓ Edge 120+ (compatible)
✓ Safari 17+ (compatible)
API Reference
Component parameters and their types.
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | TValue | — | The currently selected value. Use @bind-Value for two-way binding. |
| Disabled | bool | false | Whether the entire radio group is disabled. |
| AriaLabel | string? | — | ARIA label for the group (for screen reader accessibility). |
| Class | string? | — | Additional CSS classes for the root element. |
RadioGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | TValue | — | The value this item represents. |
| Id | string? | — | HTML id for label association. |
| Disabled | bool | false | Whether this individual item is disabled. |