Radio Group

A set of options where exactly one is chosen. The arrow keys move between them and choose as they go, and Tab leaves the group. Pair each RadioGroupItem with a <label for> that names it. Built on the bits-ui RadioGroup.

Default

Exactly one option is chosen. The arrow keys move between options and choose as they go, so the group is a single tab stop. Point a <label for> at each item for its name.

Standard · 2–4 days Express · next day Pick up in store

Chosen: standard

<div class="space-y-3">
	<RadioGroup bind:value={plan} aria-label="Delivery">
		{#each plans as option (option.value)}
			<label
				for="plan-{option.value}"
				class="flex cursor-pointer items-center gap-2 text-sm"
			>
				<RadioGroupItem id="plan-{option.value}" value={option.value} />
				{option.label}
			</label>
		{/each}
	</RadioGroup>
	<p class="text-muted text-xs">Chosen: {plan}</p>
</div>

Disabled option

A disabled item is skipped by the arrow keys and can't be chosen; the rest of the group still works.

Standard · 2–4 days Express · next day Pick up in store

<RadioGroup value="standard" aria-label="Delivery">
	{#each plans as option (option.value)}
		<label for="plan-off-{option.value}" class="flex items-center gap-2 text-sm">
			<RadioGroupItem
				id="plan-off-{option.value}"
				value={option.value}
				disabled={option.value === 'express'}
			/>
			{option.label}
		</label>
	{/each}
</RadioGroup>

API

`RadioGroup`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		The items, each beside its label.
`value` bindable	`string`	`''`	The chosen item's value. Two-way bindable via `bind:value`.
`onValueChange`	`(value: string) => void`		Called when another item is chosen (forwarded via `...rest`).
`disabled`	`boolean`		Disables every item (forwarded via `...rest`).
`class`	`string`		Additional Tailwind classes merged onto the group.

`RadioGroupItem`

One option of a RadioGroup: a round button that shows a dot while it is the chosen one. Give it an id and point a <label for> at it for its name.

Prop	Type	Description
`value` required	`string`	What the group's `value` becomes when this item is chosen.
`id`	`string`	Lets a `<label for>` name the item (forwarded via `...rest`).
`disabled`	`boolean`	Disables the item (forwarded via `...rest`).
`class`	`string`	Additional Tailwind classes merged onto the item.