# Radio

Radio button component with label, tooltip support, and reactive group selection.

## Tag

`Radio`

## Props

| Prop         | Type                         | Default     | Description                                      |
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
| `label`      | `string`                     | `-`         | Label text for the radio button                  |
| `value`      | `string \| Signal<string>`   | `-`         | Selected value (for group)                       |
| `radioValue` | `string`                     | `-`         | Value of this radio button                       |
| `tooltip`    | `string`                     | `-`         | Tooltip text on hover                            |
| `disabled`   | `boolean \| Signal<boolean>` | `false`     | Disabled state                                   |
| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
| `onclick`    | `function`                   | `-`         | Click event handler                              |

## Live Examples

### Basic Radio Group

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  const selected = $('option1');
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Radio({
      label: 'Option 1',
      value: selected,
      radioValue: 'option1',
      onclick: () => selected('option1')
    }),
    Radio({
      label: 'Option 2',
      value: selected,
      radioValue: 'option2',
      onclick: () => selected('option2')
    }),
    Radio({
      label: 'Option 3',
      value: selected,
      radioValue: 'option3',
      onclick: () => selected('option3')
    }),
    Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
  ]);
};
$mount(BasicDemo, '#demo-basic');
```

### With Tooltip

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
  </div>
</div>

```javascript
const TooltipDemo = () => {
  const selected = $('light');
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Radio({
      label: 'Light mode',
      value: selected,
      radioValue: 'light',
      tooltip: 'Light theme with white background',
      onclick: () => selected('light')
    }),
    Radio({
      label: 'Dark mode',
      value: selected,
      radioValue: 'dark',
      tooltip: 'Dark theme with black background',
      onclick: () => selected('dark')
    })
  ]);
};
$mount(TooltipDemo, '#demo-tooltip');
```

### Disabled State

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
  </div>
</div>

```javascript
const DisabledDemo = () => {
  const selected = $('enabled');
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Radio({
      label: 'Enabled option',
      value: selected,
      radioValue: 'enabled',
      onclick: () => selected('enabled')
    }),
    Radio({
      label: 'Disabled option (cannot select)',
      value: selected,
      radioValue: 'disabled',
      disabled: true,
      onclick: () => selected('disabled')
    })
  ]);
};
$mount(DisabledDemo, '#demo-disabled');
```

### Reactive Preview

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const ReactiveDemo = () => {
  const size = $('medium');
  const color = $('blue');
  
  const sizes = [
    { value: 'small', label: 'Small' },
    { value: 'medium', label: 'Medium' },
    { value: 'large', label: 'Large' }
  ];
  
  const colors = [
    { value: 'blue', label: 'Blue', class: 'text-blue-600' },
    { value: 'green', label: 'Green', class: 'text-green-600' },
    { value: 'red', label: 'Red', class: 'text-red-600' }
  ];
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'text-sm font-bold' }, 'Select size'),
    Div({ class: 'flex gap-4' }, sizes.map(s => 
      Radio({
        label: s.label,
        value: size,
        radioValue: s.value,
        onclick: () => size(s.value)
      })
    )),
    Div({ class: 'text-sm font-bold mt-2' }, 'Select color'),
    Div({ class: 'flex gap-4' }, colors.map(c => 
      Radio({
        label: c.label,
        value: color,
        radioValue: c.value,
        onclick: () => color(c.value)
      })
    )),
    Div({ 
      class: 'mt-4 p-4 rounded-lg text-center transition-all',
      style: () => {
        const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' };
        const colorMap = { blue: '#3b82f6', green: '#10b981', red: '#ef4444' };
        return `background-color: ${colorMap[color()]}; color: white; ${sizeMap[size()]}`;
      }
    }, () => `${size()} ${color()} preview`)
  ]);
};
$mount(ReactiveDemo, '#demo-reactive');
```

### Payment Method Selection

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-payment" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const PaymentDemo = () => {
  const method = $('credit');
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'text-sm font-bold' }, 'Payment method'),
    Div({ class: 'flex flex-col gap-3' }, [
      Radio({
        label: '💳 Credit Card',
        value: method,
        radioValue: 'credit',
        onclick: () => method('credit')
      }),
      Radio({
        label: '🏦 Bank Transfer',
        value: method,
        radioValue: 'bank',
        onclick: () => method('bank')
      }),
      Radio({
        label: '📱 Digital Wallet',
        value: method,
        radioValue: 'wallet',
        onclick: () => method('wallet')
      })
    ]),
    Div({ class: 'alert alert-info mt-2' }, () => {
      const messages = {
        credit: 'You selected Credit Card. Enter your card details.',
        bank: 'You selected Bank Transfer. Use the provided account number.',
        wallet: 'You selected Digital Wallet. Scan the QR code to pay.'
      };
      return messages[method()];
    })
  ]);
};
$mount(PaymentDemo, '#demo-payment');
```

### All Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  const primary = $('primary1');
  const secondary = $('secondary1');
  const accent = $('accent1');
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'card bg-base-200 p-4' }, [
      Div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'),
      Div({ class: 'flex gap-4' }, [
        Radio({
          label: 'Option A',
          value: primary,
          radioValue: 'primary1',
          class: 'radio-primary',
          onclick: () => primary('primary1')
        }),
        Radio({
          label: 'Option B',
          value: primary,
          radioValue: 'primary2',
          class: 'radio-primary',
          onclick: () => primary('primary2')
        })
      ])
    ]),
    Div({ class: 'card bg-base-200 p-4' }, [
      Div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'),
      Div({ class: 'flex gap-4' }, [
        Radio({
          label: 'Option A',
          value: secondary,
          radioValue: 'secondary1',
          class: 'radio-secondary',
          onclick: () => secondary('secondary1')
        }),
        Radio({
          label: 'Option B',
          value: secondary,
          radioValue: 'secondary2',
          class: 'radio-secondary',
          onclick: () => secondary('secondary2')
        })
      ])
    ]),
    Div({ class: 'card bg-base-200 p-4' }, [
      Div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'),
      Div({ class: 'flex gap-4' }, [
        Radio({
          label: 'Option A',
          value: accent,
          radioValue: 'accent1',
          class: 'radio-accent',
          onclick: () => accent('accent1')
        }),
        Radio({
          label: 'Option B',
          value: accent,
          radioValue: 'accent2',
          class: 'radio-accent',
          onclick: () => accent('accent2')
        })
      ])
    ])
  ]);
};
$mount(VariantsDemo, '#demo-variants');
```

### Dynamic Options

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const DynamicDemo = () => {
  const category = $('cars');
  const selected = $('');
  
  const options = {
    cars: [
      { value: 'sedan', label: 'Sedan' },
      { value: 'suv', label: 'SUV' },
      { value: 'sports', label: 'Sports' }
    ],
    colors: [
      { value: 'red', label: 'Red' },
      { value: 'blue', label: 'Blue' },
      { value: 'black', label: 'Black' }
    ]
  };
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'flex gap-4' }, [
      Radio({
        label: 'Cars',
        value: category,
        radioValue: 'cars',
        onclick: () => {
          category('cars');
          selected('');
        }
      }),
      Radio({
        label: 'Colors',
        value: category,
        radioValue: 'colors',
        onclick: () => {
          category('colors');
          selected('');
        }
      })
    ]),
    Div({ class: 'divider my-1' }),
    Div({ class: 'text-sm font-bold' }, () => `Select ${category()}`),
    Div({ class: 'flex flex-col gap-2' }, () => 
      options[category()].map(opt => 
        Radio({
          label: opt.label,
          value: selected,
          radioValue: opt.value,
          onclick: () => selected(opt.value)
        })
      )
    ),
    () => selected() 
      ? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
      : null
  ]);
};
$mount(DynamicDemo, '#demo-dynamic');
```

<script>
  (function() {
    const initRadioExamples = () => {
      
      // 1. Basic Radio Group
      const basicTarget = document.querySelector('#demo-basic');
      if (basicTarget && !basicTarget.hasChildNodes()) {
        const BasicDemo = () => {
          const selected = $('option1');
          
          return Div({ class: 'flex flex-col gap-3' }, [
            Radio({
              label: 'Option 1',
              value: selected,
              radioValue: 'option1',
              onclick: () => selected('option1')
            }),
            Radio({
              label: 'Option 2',
              value: selected,
              radioValue: 'option2',
              onclick: () => selected('option2')
            }),
            Radio({
              label: 'Option 3',
              value: selected,
              radioValue: 'option3',
              onclick: () => selected('option3')
            }),
            Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
          ]);
        };
        $mount(BasicDemo, basicTarget);
      }

      // 2. With Tooltip
      const tooltipTarget = document.querySelector('#demo-tooltip');
      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
        const TooltipDemo = () => {
          const selected = $('light');
          
          return Div({ class: 'flex flex-col gap-3' }, [
            Radio({
              label: 'Light mode',
              value: selected,
              radioValue: 'light',
              tooltip: 'Light theme with white background',
              onclick: () => selected('light')
            }),
            Radio({
              label: 'Dark mode',
              value: selected,
              radioValue: 'dark',
              tooltip: 'Dark theme with black background',
              onclick: () => selected('dark')
            })
          ]);
        };
        $mount(TooltipDemo, tooltipTarget);
      }

      // 3. Disabled State
      const disabledTarget = document.querySelector('#demo-disabled');
      if (disabledTarget && !disabledTarget.hasChildNodes()) {
        const DisabledDemo = () => {
          const selected = $('enabled');
          
          return Div({ class: 'flex flex-col gap-3' }, [
            Radio({
              label: 'Enabled option',
              value: selected,
              radioValue: 'enabled',
              onclick: () => selected('enabled')
            }),
            Radio({
              label: 'Disabled option (cannot select)',
              value: selected,
              radioValue: 'disabled',
              disabled: true,
              onclick: () => selected('disabled')
            })
          ]);
        };
        $mount(DisabledDemo, disabledTarget);
      }

      // 4. Reactive Preview
      const reactiveTarget = document.querySelector('#demo-reactive');
      if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
        const ReactiveDemo = () => {
          const size = $('medium');
          const color = $('blue');
          
          const sizes = [
            { value: 'small', label: 'Small' },
            { value: 'medium', label: 'Medium' },
            { value: 'large', label: 'Large' }
          ];
          
          const colors = [
            { value: 'blue', label: 'Blue', class: 'text-blue-600' },
            { value: 'green', label: 'Green', class: 'text-green-600' },
            { value: 'red', label: 'Red', class: 'text-red-600' }
          ];
          
          return Div({ class: 'flex flex-col gap-4' }, [
            Div({ class: 'text-sm font-bold' }, 'Select size'),
            Div({ class: 'flex gap-4' }, sizes.map(s => 
              Radio({
                label: s.label,
                value: size,
                radioValue: s.value,
                onclick: () => size(s.value)
              })
            )),
            Div({ class: 'text-sm font-bold mt-2' }, 'Select color'),
            Div({ class: 'flex gap-4' }, colors.map(c => 
              Radio({
                label: c.label,
                value: color,
                radioValue: c.value,
                onclick: () => color(c.value)
              })
            )),
            Div({ 
              class: 'mt-4 p-4 rounded-lg text-center transition-all',
              style: () => {
                const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' };
                const colorMap = { blue: '#3b82f6', green: '#10b981', red: '#ef4444' };
                return `background-color: ${colorMap[color()]}; color: white; ${sizeMap[size()]}`;
              }
            }, () => `${size()} ${color()} preview`)
          ]);
        };
        $mount(ReactiveDemo, reactiveTarget);
      }

      // 5. Payment Method Selection
      const paymentTarget = document.querySelector('#demo-payment');
      if (paymentTarget && !paymentTarget.hasChildNodes()) {
        const PaymentDemo = () => {
          const method = $('credit');
          
          return Div({ class: 'flex flex-col gap-4' }, [
            Div({ class: 'text-sm font-bold' }, 'Payment method'),
            Div({ class: 'flex flex-col gap-3' }, [
              Radio({
                label: '💳 Credit Card',
                value: method,
                radioValue: 'credit',
                onclick: () => method('credit')
              }),
              Radio({
                label: '🏦 Bank Transfer',
                value: method,
                radioValue: 'bank',
                onclick: () => method('bank')
              }),
              Radio({
                label: '📱 Digital Wallet',
                value: method,
                radioValue: 'wallet',
                onclick: () => method('wallet')
              })
            ]),
            Div({ class: 'alert alert-info mt-2' }, () => {
              const messages = {
                credit: 'You selected Credit Card. Enter your card details.',
                bank: 'You selected Bank Transfer. Use the provided account number.',
                wallet: 'You selected Digital Wallet. Scan the QR code to pay.'
              };
              return messages[method()];
            })
          ]);
        };
        $mount(PaymentDemo, paymentTarget);
      }

      // 6. All Variants
      const variantsTarget = document.querySelector('#demo-variants');
      if (variantsTarget && !variantsTarget.hasChildNodes()) {
        const VariantsDemo = () => {
          const primary = $('primary1');
          const secondary = $('secondary1');
          const accent = $('accent1');
          
          return Div({ class: 'flex flex-col gap-4' }, [
            Div({ class: 'card bg-base-200 p-4' }, [
              Div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'),
              Div({ class: 'flex gap-4' }, [
                Radio({
                  label: 'Option A',
                  value: primary,
                  radioValue: 'primary1',
                  class: 'radio-primary',
                  onclick: () => primary('primary1')
                }),
                Radio({
                  label: 'Option B',
                  value: primary,
                  radioValue: 'primary2',
                  class: 'radio-primary',
                  onclick: () => primary('primary2')
                })
              ])
            ]),
            Div({ class: 'card bg-base-200 p-4' }, [
              Div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'),
              Div({ class: 'flex gap-4' }, [
                Radio({
                  label: 'Option A',
                  value: secondary,
                  radioValue: 'secondary1',
                  class: 'radio-secondary',
                  onclick: () => secondary('secondary1')
                }),
                Radio({
                  label: 'Option B',
                  value: secondary,
                  radioValue: 'secondary2',
                  class: 'radio-secondary',
                  onclick: () => secondary('secondary2')
                })
              ])
            ]),
            Div({ class: 'card bg-base-200 p-4' }, [
              Div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'),
              Div({ class: 'flex gap-4' }, [
                Radio({
                  label: 'Option A',
                  value: accent,
                  radioValue: 'accent1',
                  class: 'radio-accent',
                  onclick: () => accent('accent1')
                }),
                Radio({
                  label: 'Option B',
                  value: accent,
                  radioValue: 'accent2',
                  class: 'radio-accent',
                  onclick: () => accent('accent2')
                })
              ])
            ])
          ]);
        };
        $mount(VariantsDemo, variantsTarget);
      }

      // 7. Dynamic Options
      const dynamicTarget = document.querySelector('#demo-dynamic');
      if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
        const DynamicDemo = () => {
          const category = $('cars');
          const selected = $('');
          
          const options = {
            cars: [
              { value: 'sedan', label: 'Sedan' },
              { value: 'suv', label: 'SUV' },
              { value: 'sports', label: 'Sports' }
            ],
            colors: [
              { value: 'red', label: 'Red' },
              { value: 'blue', label: 'Blue' },
              { value: 'black', label: 'Black' }
            ]
          };
          
          return Div({ class: 'flex flex-col gap-4' }, [
            Div({ class: 'flex gap-4' }, [
              Radio({
                label: 'Cars',
                value: category,
                radioValue: 'cars',
                onclick: () => {
                  category('cars');
                  selected('');
                }
              }),
              Radio({
                label: 'Colors',
                value: category,
                radioValue: 'colors',
                onclick: () => {
                  category('colors');
                  selected('');
                }
              })
            ]),
            Div({ class: 'divider my-1' }),
            Div({ class: 'text-sm font-bold' }, () => `Select ${category()}`),
            Div({ class: 'flex flex-col gap-2' }, () => 
              options[category()].map(opt => 
                Radio({
                  label: opt.label,
                  value: selected,
                  radioValue: opt.value,
                  onclick: () => selected(opt.value)
                })
              )
            ),
            () => selected() 
              ? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
              : null
          ]);
        };
        $mount(DynamicDemo, dynamicTarget);
      }
    };

    initRadioExamples();
    
    if (window.$docsify) {
      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
        hook.doneEach(initRadioExamples);
      });
    }
  })();
</script>