Radio Group

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The RadioGroup component allows users to select one option from a set of mutually exclusive options. Built on Radix UI, it provides accessibility features, keyboard navigation, and proper form integration. Perfect for settings, preferences, surveys, and any single-choice selections.

Basic Usage

View in Storybook

Default

Comfortable

Compact

Controlled Radio Group

Selected: medium

Small

Medium

Large

With Descriptions

Free Plan

Basic features for personal use. Up to 3 projects.

Standard Plan

Advanced features for small teams. Up to 10 projects and collaboration tools.

Premium Plan

Full feature access for large teams. Unlimited projects and priority support.

Card Layout

Starter Package

Perfect for individuals

$9/month

Professional Package

Great for small teams

$29/month

Most Popular

Enterprise Package

For large organizations

$99/month

Horizontal Layout

Notification Frequency

Never

Daily

Weekly

Monthly

Theme Preference

Light

Dark

System

Disabled State

Disabled Group

Option 1

Option 2 (Selected)

Option 3

Individual Disabled Items

Available Option

Selected Available

Unavailable Option

Form Integration

Issue Priority

Low Priority

Medium Priority

High Priority

Urgent

Issue Category

Bug Report

Feature Request

Support Question

Properties

RadioGroup

Property	Type	Default	Description
value	string	-	The controlled value of the radio group.
defaultValue	string	-	The default value for uncontrolled usage.
onValueChange	(value: string) => void	-	Callback when the value changes.
disabled	boolean	false	Whether the entire group is disabled.
required	boolean	false	Whether the group is required for form submission.
name	string	-	The name attribute for form submission.
className	string	-	Additional CSS classes.
orientation	"horizontal" | "vertical"	"vertical"	The orientation of the group.
dir	"ltr" | "rtl"	-	The reading direction.
loop	boolean	true	Whether keyboard navigation should loop.

RadioGroupItem

Property	Type	Default	Description
value	string	-	The value of this radio item.
disabled	boolean	false	Whether this item is disabled.
required	boolean	false	Whether this item is required.
className	string	-	Additional CSS classes.
id	string	-	The HTML id attribute.

Accessibility

The RadioGroup component includes comprehensive accessibility features:

• Keyboard Navigation - Arrow keys to navigate between options, Space to select
• Screen Reader Support - Proper ARIA attributes and role announcements
• Focus Management - Clear focus indicators and logical tab order
• Form Integration - Works seamlessly with form validation and submission
• Label Association - Proper label association with radio items
• Group Semantics - Uses proper radiogroup role for screen readers

Common Use Cases

The RadioGroup component is perfect for:

• Settings & Preferences - Theme selection, notification preferences, display options
• Forms & Surveys - Single-choice questions, rating scales, category selection
• Product Configuration - Size selection, color options, plan choices
• Filters & Sorting - Sort order, filter criteria, view modes
• Payment & Shipping - Payment methods, shipping options, billing preferences
• User Onboarding - Setup wizards, preference collection, account type selection

Best Practices

1. Clear Labels - Use descriptive labels that clearly explain each option
2. Logical Grouping - Group related options together with clear headings
3. Default Selection - Provide sensible defaults when appropriate
4. Consistent Layout - Maintain consistent spacing and alignment
5. Accessibility - Always associate labels with radio items using htmlFor/id
6. Visual Hierarchy - Use typography and spacing to create clear hierarchy
7. Mobile Optimization - Ensure touch targets are large enough for mobile devices
8. Form Validation - Provide clear feedback for required radio groups