A checkbox, with a label through Field.

A summary of activity every Monday.

Usage

Example.svelte
<script lang="ts">
	import { Checkbox } from "@orochibraru/ui/checkbox";
	import * as Field from "@orochibraru/ui/field";

	let notify = $state(true);
</script>

<Field.Group>
	<Field.Field orientation="horizontal">
		<Checkbox id="notify" bind:checked={notify} />
		<Field.Label for="notify">Email me when someone comments</Field.Label>
	</Field.Field>
	<Field.Field orientation="horizontal">
		<Checkbox id="weekly" />
		<Field.Content>
			<Field.Label for="weekly">Weekly digest</Field.Label>
			<Field.Description>A summary of activity every Monday.</Field.Description>
		</Field.Content>
	</Field.Field>
	<Field.Field orientation="horizontal">
		<Checkbox id="share" indeterminate />
		<Field.Label for="share">Share with everyone</Field.Label>
	</Field.Field>
	<Field.Field orientation="horizontal" data-disabled>
		<Checkbox id="archived" disabled />
		<Field.Label for="archived">Include archived projects</Field.Label>
	</Field.Field>
</Field.Group>