Radio Group - Lithesome

Preview

Code

<script lang="ts">
	import { RadioGroup, RadioGroupItem } from 'lithesome';

	const items = [
		{ value: 'aang', label: 'Avatar Aang' },
		{ value: 'zuko', label: 'Firelord Zuko' },
		{ value: 'toph', label: 'Greatest Earthbender' },
		{ value: 'azula', label: 'Firebending Prodigy', disabled: true },
		{ value: 'iroh', label: 'Uncle Iroh' }
	];
	let value = $state<string>('zuko');
</script>

<RadioGroup bind:value class="space-y-4">
	{#each items as { value, label, disabled }}
		<RadioGroupItem
			{value}
			{disabled}
			class={({ disabled }) => [
				'group flex cursor-pointer items-center gap-2',
				disabled && 'pointer-events-none opacity-40'
			]}
		>
			{#snippet children({ selected })}
				<div
					class={[
						'flex size-6 rounded-full border',
						selected
							? 'border-teal-500'
							: ['border-zinc-600 group-hover:border-zinc-900', 'dark:border-zinc-400 dark:group-hover:border-zinc-200']
					]}
				>
					{#if selected}
						<div class="m-auto size-4 rounded-full bg-teal-500"></div>
					{/if}
				</div>
				<span class="select-none">
					{label}
				</span>
			{/snippet}
		</RadioGroupItem>
	{/each}
</RadioGroup>

<span class="site-value">{value}</span>

Basic Example

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

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

<RadioGroup bind:value>
	<RadioGroupItem value="item-1">Item 1</RadioGroupItem>
	<RadioGroupItem value="item-2">Item 2</RadioGroupItem>
	<RadioGroupItem value="item-3">Item 3</RadioGroupItem>
</RadioGroup>

API Reference

<RadioGroup />

Property	Type	Description
`value`	string	The currently selected value.
`disabled`	boolean	Disables the entire group, stops all events from firing.
`onValueChanged`	(value: string) => void	Fires whenever the `value` prop changes.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`value`	string	The current value of the group.
`disabled`	boolean	True if the group is disabled.

<RadioGroupItem />

Property	Type	Description
`value`	string	The unique value of the item.
`disabled`	boolean	Disables the entire group, stops all events from firing.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`selected`	boolean	The current value of the group.
`disabled`	boolean	True if the group is disabled.