Bind Checkbox In Svelte – Code Example

In this article, you will learn How To Bind Checkbox In Svelte.

Checkboxes are used for toggling between states and to show some data depending on the checkbox.

Binding Checkbox

<script>
	let visible=true
</script>

<input type=checkbox bind:checked={visible} />Check
{#if visible}
	<h1>Visible</h1>
{:else}
<h1>Not Visible</h1>
{/if}

Here we have a variable with a Boolean value and we’ll show data on the basis of the checkbox. You just have to add bind:checked for checkboxes and Svelte will toggle it accordingly.

You can use the toggle variable and show some data using {#if} block in Svelte.

Result