Radio
Radio button with RadioGroup for mutually exclusive selection, keyboard navigation, and controlled/uncontrolled modes
Radio
Modern radio buttons with smooth animations, color variants, sizes, layouts, card-style selections and rich content support.
Basic usage
Use Radio for single-choice options and RadioGroup to connect multiple radios, ensuring only one option is selected.
Standalone radios
RadioGroup (uncontrolled)
RadioGroup ensures only one option is active.
Controlled RadioGroup
Control the selected value with value and onChange. This is ideal when you need to react to changes, persist state, or submit forms.
Pricing plans
Upgrade or downgrade at any time.
Selected plan
You chose: Pro
Use the controlled value to drive pricing, features or API calls.
Descriptions & helper text
Add description to each option and helperText to the group for more context.
Plans with descriptions
Descriptions clarify what each option includes.
Color variants
Use the variant prop to align radios with your semantic colors: primary, secondary, accent, success, warning, error, and more.
Default
Primary
Secondary
Accent
Success
Warning
Error
Sizes & layout
Use size for density and direction / layout props on RadioGroup to arrange options horizontally or vertically.
Sizes
Horizontal group
Choose how often you want to be billed.
Selected: monthly
Card-style radio selections
Use the card mode on RadioGroup to build rich, clickable cards for pricing plans and other visual choices.
Pricing cards
Advanced: server location with icons
Combine icons, descriptions, badges and helper text for production-grade selection flows.
Server location
Select the region closest to your users for best performance.
Theme colors & palette
Represent visual choices, like theme colors, with horizontally arranged card radios.
Theme color
Pick the primary accent used across your UI.
Feature tiers & personas
Build more expressive cards using icons, badges and short copy to explain the differences between tiers.
Product tiers
Mixed standard & card layouts
Combine standard radios and card radios in the same flow, using icons and badges where needed.
Security level & access
Security level
Access type
Summary & review panel
Use the selected values from multiple groups to build a compact summary card before submission.
Current selections
This summary card demonstrates how to wire multiple RadioGroup components into a single preview panel.
Use this pattern for checkout flows, onboarding wizards and complex configuration screens.
Usage Guidelines
When to Use
- Single selection from options
- Yes/No questions
- Exclusive choices
Accessibility
- RadioGroup for keyboard navigation
- aria-checked states
- Proper fieldset grouping
Performance
- CSS-only states
- Minimal React updates
Common Mistakes
- Single radio button (need at least 2)
- Missing RadioGroup wrapper
Frequently Asked Questions
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible checkbox input with indeterminate state support and form integration
Accessible CheckboxGroup for multi-selection, and form integration
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface