radio-group.tsx

Overview

The radio-group.tsx file defines two React functional components, RadioGroup and RadioGroupItem, which serve as styled wrappers around Radix UI's RadioGroupPrimitive components. These components provide accessible, customizable radio group UI elements with consistent styling and behavior, leveraging the underlying Radix UI primitives and additional styling utilities.

This file is designed for use in React applications that require radio input groups with enhanced visual styling and accessibility compliance. It abstracts the complexity of Radix UI primitives, providing a simpler and consistent interface tailored to the application's design system.

Components

RadioGroup

A wrapper component around RadioGroupPrimitive.Root that renders a container for a group of radio items.

Props

• Accepts all props available to RadioGroupPrimitive.Root (from @radix-ui/react-radio-group).

• className?: string — Optional CSS class names to customize or extend the styling of the root container.

Description

• Adds a default CSS grid layout with gap spacing (grid gap-3) via a utility function cn for class name concatenation.

• Adds a data-slot="radio-group" attribute to facilitate DOM querying or styling hooks.

• Spreads remaining props to the underlying Radix primitive root component.

Usage Example

<RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
  <RadioGroupItem value="option1" />
  <RadioGroupItem value="option2" />
  <RadioGroupItem value="option3" />
</RadioGroup>

RadioGroupItem

A wrapper component around RadioGroupPrimitive.Item that represents an individual radio button item.

Props

• Accepts all props available to RadioGroupPrimitive.Item.

• className?: string — Optional CSS class names to customize or extend the styling of the individual radio item.

Description

• Applies comprehensive styling classes for borders, colors, focus rings, invalid states, dark mode support, sizing, and disabled states using utility classes.

• Adds a data-slot="radio-group-item" attribute for DOM querying or styling.

• Contains a nested RadioGroupPrimitive.Indicator that visually displays the selected state.

• The indicator uses a CircleIcon from the lucide-react icon set, positioned centrally inside the radio item, representing the selected state.

Usage Example

<RadioGroupItem value="option1" />

This should be used inside a RadioGroup to represent each selectable option.

Implementation Details

• Uses Radix UI's @radix-ui/react-radio-group primitives for accessibility and keyboard interaction.

• The cn utility function (imported from @/lib/utils) is used to concatenate and conditionally apply class names.

• Styling relies heavily on utility-first CSS classes for consistent theming, focus, disabled, and invalid states.

• The CircleIcon from lucide-react provides a crisp, scalable SVG icon to indicate selection.

• Attributes like data-slot serve to mark elements semantically for styling or automated testing.

Interaction with Other Parts of the System

• Radix UI primitives: This file builds directly on Radix UI's RadioGroupPrimitive components, inheriting their accessibility and event handling behavior.

• Utility functions: Uses a local utility cn for class name management, promoting consistent styling patterns.

• Icon library: Depends on lucide-react for the selection indicator icon.

• Styling system: Relies on a utility-first CSS framework (likely Tailwind CSS or similar) for styling classes.

• Client component marker: The 'use client'; directive indicates this component is intended for client-side rendering, important in frameworks like Next.js.

Mermaid Component Diagram

componentDiagram
    component RadioGroup {
        +props: RadioGroupPrimitive.Root props
        +renders RadioGroupPrimitive.Root
        +applies grid layout and gap
        +data-slot="radio-group"
    }

    component RadioGroupItem {
        +props: RadioGroupPrimitive.Item props
        +renders RadioGroupPrimitive.Item
        +applies border, focus, invalid, dark mode styles
        +data-slot="radio-group-item"
        +contains RadioGroupPrimitive.Indicator with CircleIcon
    }

    RadioGroup *-- RadioGroupItem : contains >
    RadioGroupItem o-- CircleIcon : uses >
    RadioGroup --|> RadioGroupPrimitive.Root : wraps >
    RadioGroupItem --|> RadioGroupPrimitive.Item : wraps >
    RadioGroupItem --> RadioGroupPrimitive.Indicator : contains >

Summary

The radio-group.tsx file provides styled, accessible radio group components based on Radix UI primitives, integrating custom styling and iconography for selection indication. It promotes reusable, consistent, and accessible radio inputs within the React application UI, while being simple to use and extend. The components interact closely with the Radix UI library and the project's styling utilities to deliver a polished user experience.