Checkbox

<script lang="ts">
	import { Checkbox } from 'radix-svelte';
	import type { ResolvedProps } from 'radix-svelte/internal/helpers';
	// These are internal icons, but they're not exported from the package.
	// Use your own icons instead.
	import Check from '~icons/lucide/check';

	let rootChecked: boolean;
	let rootDisabled: boolean;
	let rootRequired: boolean;
	let rootName: string;
	let rootValue: string;
</script>

<form>
	<div class="flex items-center justify-center">
		<Checkbox.Root
			class="flex h-6 w-6 appearance-none items-center justify-center
			rounded-sm bg-white shadow-lg outline-none hover:opacity-75
			focus:ring focus:ring-black disabled:bg-vermilion-300"
			disabled={rootDisabled}
			bind:checked={rootChecked}
			name={rootName}
			value={rootValue}
			required={rootRequired}
			id="c1"
		>
			<Checkbox.Indicator class="text-vermilion-700">
				<Check />
			</Checkbox.Indicator>
		</Checkbox.Root>
		<label class="pl-[15px] text-[15px] leading-none text-white" for="c1">
			Accept terms and conditions.
		</label>
	</div>
</form>