/js/checkbox/Index.svelte

<script context="module" lang="ts">
	export { default as BaseCheckbox } from "./shared/Checkbox.svelte";
</script>

<script lang="ts">
	import { Gradio } from "@gradio/utils";
	import { Block, Info, IconButtonWrapper } from "@gradio/atoms";
	import { StatusTracker } from "@gradio/statustracker";
	import type { CheckboxProps, CheckboxEvents } from "./types";
	import BaseCheckbox from "./shared/Checkbox.svelte";

	let props = $props();
	const gradio = new Gradio<CheckboxEvents, CheckboxProps>(props);
</script>

<Block
	visible={gradio.shared.visible}
	elem_id={gradio.shared.elem_id}
	elem_classes={gradio.shared.elem_classes}
>
	<StatusTracker
		autoscroll={gradio.shared.autoscroll}
		i18n={gradio.i18n}
		{...gradio.shared.loading_status}
		on_clear_status={() =>
			gradio.dispatch("clear_status", gradio.shared.loading_status)}
	/>
	{#if gradio.shared.show_label && gradio.props.buttons && gradio.props.buttons.length > 0}
		<IconButtonWrapper
			buttons={gradio.props.buttons}
			on_custom_button_click={(id) => {
				gradio.dispatch("custom_button_click", { id });
			}}
		/>
	{/if}
	<BaseCheckbox
		label={gradio.shared.label || gradio.i18n("checkbox.checkbox")}
		bind:value={gradio.props.value}
		interactive={gradio.shared.interactive}
		show_label={gradio.shared.show_label}
		on_change={(val) => gradio.dispatch("change", val)}
		on_input={() => gradio.dispatch("input")}
		on_select={(data) => gradio.dispatch("select", data)}
	/>
	{#if gradio.props.info}
		<Info info={gradio.props.info} />
	{/if}
</Block>