Radio Group

Allow users to select a single choice from a list

<script lang="ts">
	import { RadioGroup, RadioGroupItem } from 'lithesome';
	import { cn } from '$site/index.js';

	const options = [
		{ value: 'aang', label: 'Avatar Aang' },
		{ value: 'zuko', label: 'Firelord Zuko' },
		{ value: 'toph', label: 'Greatest Earthbender Alive' }
	];

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

<RadioGroup bind:value class="flex w-[70%] flex-col gap-2">
	{#each options as { value, label }}
		<RadioGroupItem
			{value}
			class={({ checked }) =>
				cn(
					'flex w-full items-center gap-4 rounded-md border p-4 backdrop-blur',
					'border-neutral-300 bg-white dark:border-neutral-700 dark:bg-neutral-900',
					checked ? 'bg-black text-white dark:bg-white dark:text-black' : ''
				)}
		>
			{#snippet children({ checked })}
				<div
					class={cn(
						'flex h-6 w-6 items-center justify-center rounded-full border-2',
						checked ? 'border-white dark:border-black' : 'border-black dark:border-white'
					)}
				>
					{#if checked}
						<div class="h-3 w-3 rounded-full bg-white dark:bg-black"></div>
					{/if}
				</div>
				{label}
			{/snippet}
		</RadioGroupItem>
	{/each}
</RadioGroup>

<span class="pointer-events-none absolute bottom-2 right-2 select-none text-xs opacity-40">Value: {value}</span>

Prop	Type	Description
`value` *	`JsonValue` `Default: ——`	The selected value of radiogroup.
`required`	`boolean` `Default: false`	Adds the aria-required attribute.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-radiogroup`	`''`	The base data attribute, can be used for styling.

Prop	Type	Description
`value` *	`JsonValue` `Default: ——`	The value of item.
`disabled`	`boolean` `Default: false`	Disables the item, disallowing clicking and keyboard navigation.

Data attribute	Value	Description
`data-radiogroupitem`	`''`	The base data attribute, can be used for styling.

Basic Example

<script>
	import { RadioGroup, RadioGroupItem } from 'lithesome';

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

<RadioGroup>
	<RadioGroupItem value="light">Light mode</RadioGroupItem>
	<RadioGroupItem value="dark">Dark mode</RadioGroupItem>
</RadioGroup>