`Radio` is a form control component that allows users to select a single option from a set.

Features:

- Multiple visual variants (default, accent, outline) - Support for disabled and focused states - Two label approaches: simple string children or explicit `<Radio.Label>` for complex content - Controlled usage for reliable state management - Group functionality via RadioGroup component - Proper keyboard and screen reader accessibility

Usage Guidelines:

- Use when users need to select exactly one option from a list - Provide clear, concise labels for each option - Use RadioGroup for related options - Always show all available options - Simple labels: `<Radio>Label text</Radio>` - Complex labels: `<Radio><Radio.Label>Complex content</Radio.Label></Radio>` - Consider appropriate variant based on your UI

Accessibility:

- Proper role and ARIA attributes - Keyboard navigation with arrow keys in groups - Focus management and visible focus states - Label association for screen readers - Proper group semantics with fieldset/legend pattern Basic: Demonstrates all variants, states, and interactions of the Radio component.

Features:

- Three visual variants: default, accent, and outline - Different states: rest, focused, and disabled - On/off interactions for each variant and state

This comprehensive example shows all possible combinations of variants, states, and interactions for the Radio component.

Disabled: Demonstrates a radio button in the disabled state.

Features:

- Visual indication that the control cannot be interacted with - Prevents user interaction while maintaining form value - Proper styling that shows the control is unavailable

Use disabled radio buttons when:

- The option is not applicable in the current context - Permissions don't allow selection of this option - The option will become available based on other selections

Variant: Demonstrates the different visual variants of the Radio component.

Features:

- Default: Standard styling with filled selection indicator - Accent: Themed styling with brand color accent - Outline: Minimal styling with outline appearance

Usage Guidelines:

- Default: Use for most standard forms and interfaces - Accent: Use to highlight important option groups - Outline: Use for secondary options or on colored backgrounds

This example shows how the same functionality can be presented with different visual styles to match your design requirements.

Label Usage: Demonstrates two ways to use labels with Radio.

- Simple string children: automatically wrapped with Radio.Label - Explicit Radio.Label: for more complex label content

Group: Demonstrates the RadioGroup component for managing related radio options.

Features:

- Two different usage patterns: 1. Providing options array via the options prop 2. Using RadioGroup.Item as children for more customization - Automatic state management across the group - Proper name attribution for form submission - Simplified onChange handling with single value

Usage Guidelines:

- Always use RadioGroup for related options - Use options prop for simple cases with consistent styling - Use RadioGroup.Item children for more complex layouts or custom styling - Provide a default selected value when appropriate

GroupVariant: Demonstrates applying visual variants to a RadioGroup.

Features:

- All RadioGroup.Items inherit the variant from the parent group - Consistent styling across all options in the group - Different variants affect the visual presentation of all radios

Usage Guidelines:

- Use the same variant across a logical group of options - Select variant based on the importance of the option group - Consider the visual hierarchy when choosing variants

This example shows how selecting different variants affects the entire RadioGroup, and how the selected option itself controls which variant is applied.

GroupWithDisabledOptions: Demonstrates a RadioGroup with some options disabled.

Features:

- Mix of enabled and disabled options in the same group - Disabled options maintain visual consistency but prevent interaction - Users can only select from available (enabled) options - Proper accessibility support for disabled options

Usage Guidelines:

- Use when certain options are conditionally unavailable - Maintain visual presence of disabled options for context - Ensure at least one option remains enabled for meaningful selection - Consider providing feedback about why options are disabled

This example shows two different approaches:

1. Using the options prop with disabled property 2. Using RadioGroup.Item with disabled prop for individual control