import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './RadioGroupField.stories'

<Meta of={Stories} />

# RadioGroupField

A simple radio button group for selecting one option from a list.

## Usage

```tsx
import { RadioGroupField } from '@/components/onboarding'

<RadioGroupField
  id="plan"
  label="Subscription Plan"
  description="Yearly plans offer significant savings."
  options={[
    { value: 'monthly', label: 'Monthly ($9.99/month)' },
    { value: 'yearly', label: 'Yearly ($99.99/year)' },
    { value: 'lifetime', label: 'Lifetime ($299.99)' },
  ]}
  value={selected}
  onChange={setSelected}
/>
```

## Props

- `orientation`: `'vertical'` (default) or `'horizontal'`
- Options can have an optional `description` for additional context
- Individual options can be disabled with `disabled: true`

## Examples

### Default

<Canvas of={Stories.Default} />

### With Description

<Canvas of={Stories.WithDescription} />

### Horizontal Layout

<Canvas of={Stories.Horizontal} />

### With Option Descriptions

<Canvas of={Stories.WithOptionDescriptions} />

### With Disabled Option

<Canvas of={Stories.WithDisabledOption} />

### With Error

<Canvas of={Stories.WithError} />

### Disabled

<Canvas of={Stories.Disabled} />