Radio Group Component
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 key focuses the selected radio button (or first if none selected)
✓ Arrow keys (Up/Down/Left/Right) navigate between options and select
✓ Space and Enter keys select the focused radio button
✓ Disabled items are not focusable (tabindex="-1")
✓ ARIA attributes set correctly (role="radiogroup", role="radio", aria-checked)
✓ Focus ring appears on keyboard focus (focus-visible:ring-2)
✓ Color contrast meets WCAG 2.1 AA standards
✓ Semantic label association using htmlFor attribute
✓ Screen readers announce radio state and group membership
Browser Compatibility
Tested and verified across modern browsers.
✓ Chrome 120+ (compatible)
✓ Firefox 120+ (compatible)
✓ Edge 120+ (compatible)
✓ Safari 17+ (compatible)