# Radio Group
URL: /docs/web/components/radio-group

Radio Group component with multiple variants and sizes.

**Demo:**

```tsx
'use client';

import { useState } from 'react';

import { RadioGroup, type RadioGroupOption } from '@docyrus/ui/components/radio-group';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { cn } from '@docyrus/ui/primitives/lib/utils';

const planOptions: RadioGroupOption[] = [
  {
    value: 'starter', label: 'Starter', description: 'For individuals and small projects', icon: 'hi-user-02', color: '#3b82f6'
  },
  {
    value: 'pro', label: 'Professional', description: 'For growing teams with advanced needs', icon: 'hi-briefcase-02', color: '#8b5cf6'
  },
  {
    value: 'enterprise', label: 'Enterprise', description: 'Custom solutions for large organizations', icon: 'hi-building-06', color: '#f59e0b'
  },
  {
    value: 'legacy', label: 'Legacy', description: 'No longer available for new signups', disabled: true
  }
];

const priorityOptions: RadioGroupOption[] = [
  { value: 'low', label: 'Low', color: '#22c55e' },
  { value: 'medium', label: 'Medium', color: '#f59e0b' },
  { value: 'high', label: 'High', color: '#ef4444' },
  { value: 'critical', label: 'Critical', color: '#dc2626' }
];

export function RadioGroupDemo() {
  type Variant = 'default' | 'card';
  type ColumnCount = 1 | 2 | 3 | 4;

  const [variant, setVariant] = useState
                  
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Columns</span>
                
                  
                    
                    
                    
                  
                
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="space-y-8">
        <div className="space-y-2">
          <h3 className="text-sm font-medium">Select a plan</h3>
          
          <p className="text-xs text-muted-foreground">
            Selected: <span className="font-medium text-foreground">{selected}</span>
          </p>
        </div>

        <div className="space-y-2">
          <h3 className="text-sm font-medium">Priority</h3>
          
        </div>
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-radio-group
```

**Dependencies:**
- [radix-ui](https://www.npmjs.com/package/radix-ui)
- [@types/react](https://www.npmjs.com/package/@types/react)
- [@types/react-dom](https://www.npmjs.com/package/@types/react-dom)
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  RadioGroup
} from "@docyrus/ui/components/radio-group";

```

## Variants

| Variant | Description |
|---------|-------------|
| `default` | Default style |
| `card` | Card — `gap-2` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `variant` | `"default"` \| `"card"` | `"default"` |
| `options` | `RadioGroupOption[]` | — |
| `ref` | `Ref<HTMLDivElement>` | — |
| `className` | `string` | — |