# Radio Group

## Example

```svelte
<script lang="ts">
	import { RadioGroup, Paragraph, Subheading } from '@foxui/all';

	let value = $state('comfortable');
	let plan = $state('pro');
</script>

<div class="not-prose flex flex-col gap-4">
	<RadioGroup
		bind:value
		options={[
			{ value: 'default', label: 'Default' },
			{ value: 'comfortable', label: 'Comfortable' },
			{ value: 'compact', label: 'Compact', disabled: true }
		]}
	/>
</div>

<Paragraph>Selected: <code>{value}</code></Paragraph>

<Subheading>With descriptions</Subheading>

<div class="not-prose flex flex-col gap-4">
	<RadioGroup
		bind:value={plan}
		options={[
			{
				value: 'hobby',
				label: 'Hobby',
				description: 'Free forever. Great for small side projects.'
			},
			{
				value: 'pro',
				label: 'Pro',
				description: '$12/month. Unlimited projects and team seats.'
			},
			{
				value: 'enterprise',
				label: 'Enterprise',
				description: 'Custom pricing with SSO and priority support.',
				disabled: true
			}
		]}
	/>
</div>

<Paragraph>Plan: <code>{plan}</code></Paragraph>
```

## Documentation

## Usage

A set of radio buttons where exactly one can be selected at a time.

The simplest way is to pass an `options` array — items, labels, and spacing are handled for you:

```svelte
<script lang="ts">
	import { RadioGroup } from '@foxui/all';

	let value = $state('comfortable');
</script>

<RadioGroup
	bind:value
	options={[
		{ value: 'default', label: 'Default' },
		{ value: 'comfortable', label: 'Comfortable' },
		{ value: 'compact', label: 'Compact' }
	]}
/>
```

## With descriptions

Each option can carry an optional `description`:

```svelte
<RadioGroup
	bind:value
	options={[
		{ value: 'card', label: 'Card', description: 'Pay with a credit or debit card.' },
		{ value: 'paypal', label: 'PayPal', description: 'Redirect to PayPal to complete payment.' }
	]}
/>
```

## Horizontal layout

```svelte
<RadioGroup bind:value orientation="horizontal" options={[...]} />
```

## Custom rendering

For full control, skip `options` and compose with `RadioGroupItem`:

```svelte
<script lang="ts">
	import { RadioGroup, RadioGroupItem, Label } from '@foxui/all';

	let value = $state('option-one');
</script>

<RadioGroup bind:value>
	<label class="flex items-center gap-2">
		<RadioGroupItem value="option-one" id="option-one" />
		<Label for="option-one">Option One</Label>
	</label>
	<label class="flex items-center gap-2">
		<RadioGroupItem value="option-two" id="option-two" />
		<Label for="option-two">Option Two</Label>
	</label>
</RadioGroup>
```

## Sources

This component uses the bits-ui component: RadioGroup, see here for the documentation for that: https://bits-ui.com/docs/components/radio-group/llms.txt

## API Reference

### RadioGroup
A set of radio buttons where exactly one can be selected. Pass an `options` array for the common case, or use `RadioGroupItem` as children for custom layouts.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `string` | `''` | The currently selected value. (bindable) |
| options | `RadioGroupOption[]` | `-` | Array of options rendered as radio items with labels. Each option is `{ value, label?, description?, disabled? }`. Omit to compose children manually. |
| variant | `'primary' | 'secondary'` | `'primary'` | Color variant applied to every item. |
| sizeVariant | `'default' | 'sm' | 'lg'` | `'default'` | Size applied to every item. |
| orientation | `'vertical' | 'horizontal'` | `'vertical'` | Layout direction when rendering the options array. |
| disabled | `boolean` | `-` | Disable the entire group. |
| onValueChange | `(value: string) => void` | `-` | Callback when the selected value changes. |
| children | `Snippet` | `-` | Custom content (e.g. `RadioGroupItem`s). Ignored if `options` is provided. |
| class | `string` | `-` | Additional CSS classes on the group container. |

### RadioGroupItem
A single radio item. Use when composing a custom layout.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `string` | `-` | The value represented by this item. (required) |
| variant | `'primary' | 'secondary'` | `'primary'` | Color variant. |
| sizeVariant | `'default' | 'sm' | 'lg'` | `'default'` | Size of the radio circle. |
| disabled | `boolean` | `-` | Disable this item. |
| id | `string` | `-` | HTML id used to associate an external `<Label for={id}>`. |
| class | `string` | `-` | Additional CSS classes. |