Radio Group
A Radio Group component is a UI element that allows users to select one option from a set of mutually exclusive choices. It typically consists of multiple radio buttons, where only one button can be selected at a time. Radio groups are commonly used in forms to gather user preferences, ensuring a clear and organized way to present options for selection. They enhance user experience by providing a straightforward interface for making single-choice decisions.
# Demo
Basic Radio Groups
Simple radio groups with horizontal and vertical orientations.
Horizontal Layout
Selected: Business
Vertical Layout
Selected: Startup
Radio Groups with Descriptions
Radio groups with additional descriptive text for each option.
Payment Method
Delivery Options
Settings Radio Groups
Radio groups commonly used in settings and preferences.
Notification Preferences
Theme Preference
Device Selection
Radio group for selecting device types with icons and descriptions.
Primary Device
Selected device:Laptop
Portable computer with keyboard
Survey Form
Multiple radio groups in a survey format.
Customer Satisfaction Survey
Survey Summary
Satisfaction:Satisfied
Recommendation:Likely
Usage Frequency:Weekly
Custom Styled Radio Groups
Radio groups with custom styling and visual enhancements.
Priority Level
Subscription Plan
Radio Group Best Practices
Guidelines for effective radio group implementation.
✅ Do
- • Use for mutually exclusive options
- • Provide clear, descriptive labels
- • Include helpful descriptions when needed
- • Group related options together
- • Set a sensible default selection
- • Use vertical layout for better readability
- • Ensure adequate spacing between options
❌ Don't
- • Use for multiple selections (use checkboxes)
- • Create too many options (consider select)
- • Use vague or ambiguous labels
- • Leave radio groups without default selection
- • Mix different question types in one group
- • Make radio buttons too small to click
- • Forget to handle form validation
Selection History
Track all radio group selections made above.
Recent Selections
No selections made yet. Try selecting options above.
Current Selections Summary
Basic Horizontal:Business
Payment Method:Credit Card
Delivery Option:Standard Delivery
Theme:Light Theme
Device:Laptop
Total selections: 0
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | Optional | Orientation of radio group. |
| items | RadioItem[] | Required | Array of radio items. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| id | string | Optional | ID for the radio group. |
| label | string | Optional | Label for the radio group. |
| itemClassName | string | ' ' | You can customise by passing tailwind classes. |
| radioClassName | string | ' ' | You can customise by passing tailwind classes. |
| labelClassName | string | ' ' | You can customise by passing tailwind classes. |
| disabled | boolean | false | Whether the radio group is disabled. |
| value | string | Required | Selected radio value. |
| onChange | (selected: string) => void | Required | Callback when selection changes. |
| showLabel | boolean | Optional | Whether to show labels. |
# Tags