bind:checked for Checkboxes
Bind a boolean variable to a checkbox input's checked state.
bind:checked for Checkboxes is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Checkbox Binding
Use bind:checked to sync a boolean with a checkbox input.
<input type="checkbox" bind:checked={agreed} />Reading the State
The bound variable is true when checked, false when not.
Toggling Visibility
Combine with {#if} to show or hide content based on the checkbox.
{#if agreed}<p>Thanks!</p>{/if}Setting Programmatically
Assigning to the variable toggles the checkbox display.
function reset() { agreed = false; }Multiple Checkboxes
For independent checkboxes, declare one variable per checkbox.
let sub = false, terms = false;Tri-State Inputs
The DOM has an indeterminate property too; you can bind it with bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />Form Integration
Checkbox state participates in form submissions like any input.
Label Wrapping
Wrap the checkbox inside a <label> so clicking the label toggles it.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Accessibility
Always label checkboxes. Screen readers depend on visible labels for context.
Disabled State
Combine with disabled={...} for read-only checkboxes.
Reactive Side Effects
React to changes with a $: statement that runs when the bound variable updates.
$: if (dark) document.body.classList.add("dark");Quick Check
What does bind:checked bind?
Recap
bind:checked ties a boolean to a checkbox. Use bind:indeterminate for the third visual state.
Frequently asked questions
Is the “bind:checked for Checkboxes” lesson free?
Yes — the full text of “bind:checked for Checkboxes” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “bind:checked for Checkboxes”?
Bind a boolean variable to a checkbox input's checked state. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “bind:checked for Checkboxes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- bind:value for Text Inputs
- bind:checked for Checkboxes
- bind:group for Radio and Checkbox Groups
- bind:this for DOM Element References