# Radio

> Single-choice picker with `RadioGroup` compound API and roving tabindex.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/radio

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { Radio } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { useState } from "react";
import { RadioGroup, Radio } from "@sisyphos-ui/react";

export const Plan = () => {
  const [plan, setPlan] = useState<string | number>("pro");
  return (
    <RadioGroup label="Plan" value={plan} onChange={setPlan} variant="card">
      <Radio value="free" label="Free" />
      <Radio value="pro" label="Pro" />
    </RadioGroup>
  );
};
```

### Vue 3+

```vue
<script setup lang="ts">
import { ref } from "vue";
import { RadioGroup, Radio } from "@sisyphos-ui/vue";
const plan = ref<string | number>("pro");
</script>

<template>
  <RadioGroup label="Plan" v-model:value="plan" variant="card">
    <Radio value="free" label="Free" />
    <Radio value="pro" label="Pro" />
  </RadioGroup>
</template>
```

### Angular 17+

```ts
import { Component, signal } from "@angular/core";
import { RadioGroup, Radio } from "@sisyphos-ui/angular";

@Component({
  selector: "app-plan",
  standalone: true,
  imports: [RadioGroup, Radio],
  template: `
    <sui-radio-group label="Plan" [(value)]="plan" variant="card">
      <sui-radio value="free" label="Free" />
      <sui-radio value="pro" label="Pro" />
    </sui-radio-group>
  `,
})
export class PlanComponent {
  plan = signal<string | number>("pro");
}
```

## Examples

### Default

Group multiple `<Radio>` inside a `<RadioGroup>` for shared state.

```tsx
import { useState } from "react";
import { Radio, RadioGroup } from "@sisyphos-ui/react";

export function Example() {
  const [plan, setPlan] = useState<string | number>("pro");

  return (
    <RadioGroup label="Plan" value={plan} onChange={setPlan}>
      <Radio value="free" label="Free" description="For personal projects" />
      <Radio value="pro"  label="Pro — $12/mo" description="For growing teams" />
      <Radio value="team" label="Team — $29/mo" description="Shared workspaces and roles" />
    </RadioGroup>
  );
}
```

### Card variant

Card variant turns each option into a large, clickable surface.

```tsx
import { useState } from "react";
import { Radio, RadioGroup } from "@sisyphos-ui/react";

export function Example() {
  const [billing, setBilling] = useState<string | number>("monthly");

  return (
    <RadioGroup
      variant="card"
      direction="horizontal"
      label="Billing"
      value={billing}
      onChange={setBilling}
    >
      <Radio value="monthly" label="Monthly" description="$12 / month" />
      <Radio value="yearly"  label="Yearly"  description="$120 / year — save 2 months" />
    </RadioGroup>
  );
}
```

### Sizes

`size` on `RadioGroup` cascades to every `Radio` inside.

```tsx
import { Radio, RadioGroup } from "@sisyphos-ui/react";

export function Example() {
  return (
    <>
      <RadioGroup name="size-sm" size="sm" defaultValue="a" label="Small">
        <Radio value="a" label="Option A" />
        <Radio value="b" label="Option B" />
      </RadioGroup>
      <RadioGroup name="size-md" size="md" defaultValue="a" label="Medium">
        <Radio value="a" label="Option A" />
        <Radio value="b" label="Option B" />
      </RadioGroup>
      <RadioGroup name="size-lg" size="lg" defaultValue="a" label="Large">
        <Radio value="a" label="Option A" />
        <Radio value="b" label="Option B" />
      </RadioGroup>
    </>
  );
}
```

<!-- exports: { "Radio": "@sisyphos-ui/react" } -->