Radio Group
RadioGroup Primitive
Headless, unstyled radio group primitive with full keyboard navigation and accessibility.
Basic Headless Primitive
The primitive provides behavior, accessibility, and arrow key navigation.
Selected: Option 1
Try using arrow keys ↑↓ to navigate!
Controlled State
Control the primitive state externally with buttons.
Selected size: Medium
Arrow Key Navigation
Built-in keyboard navigation with arrow keys.
Click an option, then use ↑↓ or ←→ arrow keys to navigate
Disabled State
Disable the entire group or individual items.
Disabled Group:
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
Included by default
role="radiogroup", role="radio", arrow-key navigation, screen reader announcements, and roving tab index behavior.
Keyboard Shortcuts
Navigate and interact with radio groups using keyboard.
Navigate options
Arrow Keys
Select option
Space / Enter
Navigate to group
Tab
API Reference
Component properties and parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | TValue? | — | The currently selected value. Supports two-way binding. |
| ValueChanged | EventCallback<TValue> | — | Callback invoked when the selected value changes. |
| Disabled | bool | false | Disables the entire radio group when true. |
| AriaLabel | string? | — | Accessible label for screen readers. |
| Item.Value | TValue | — | The value of each radio item (required). |
| Item.AdditionalAttributes | IReadOnlyDictionary<string, object>? | — | Additional attributes passed to the item button element. |
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use RadioGroup Primitive
- ✓ Building a custom design system
- ✓ Need complete control over styling
- ✓ Want to apply your own CSS framework
- ✓ Creating unique visual designs
Use Styled Component
- ● Want shadcn/ui design out of the box
- ● Need quick implementation
- ● Like the default styling
- ● Prefer convention over configuration