Checkbox and radio bindings in Svelte

Introduction

Checkbox and radio bindings let you easily connect form inputs to your code. This means your app knows what the user selects without extra work.

When you want to let users pick one or more options in a form.

When you need to update your app instantly as users check or select choices.

When building surveys, settings pages, or filters with multiple options.

When you want simple code that automatically keeps track of user selections.

Syntax

Svelte

<input type="checkbox" bind:checked={variable} />
<input type="radio" bind:group={variable} value="option1" />

Use bind:checked for checkboxes to link a boolean variable.

Use bind:group for radio buttons to link a variable that holds the selected value.

Examples

This example shows a checkbox linked to isChecked. The text updates as you check or uncheck.

Svelte

<script>
  let isChecked = false;
</script>
<input type="checkbox" bind:checked={isChecked} />
<p>Checked? {isChecked ? 'Yes' : 'No'}</p>

Here, radio buttons share the same group variable selectedColor. Only one can be selected at a time.

Svelte

<script>
  let selectedColor = '';
</script>
<label><input type="radio" bind:group={selectedColor} value="red" /> Red</label>
<label><input type="radio" bind:group={selectedColor} value="blue" /> Blue</label>
<p>Selected color: {selectedColor}</p>

Checkboxes with bind:group can link to an array to track multiple selections.

Svelte

<script>
  let fruits = [];
</script>
<label><input type="checkbox" bind:group={fruits} value="apple" /> Apple</label>
<label><input type="checkbox" bind:group={fruits} value="banana" /> Banana</label>
<p>Fruits selected: {fruits.join(', ')}</p>

Sample Program

This component shows three examples: a single checkbox, radio buttons, and multiple checkboxes bound to variables. The displayed text updates as you interact.

Svelte

<script>
  let agree = false;
  let gender = '';
  let hobbies = [];
</script>
<main>
  <h2>Checkbox binding</h2>
  <label>
    <input type="checkbox" bind:checked={agree} /> I agree to terms
  </label>
  <p>Agreed? {agree ? 'Yes' : 'No'}</p>

  <h2>Radio binding</h2>
  <label><input type="radio" bind:group={gender} value="male" /> Male</label>
  <label><input type="radio" bind:group={gender} value="female" /> Female</label>
  <p>Selected gender: {gender}</p>

  <h2>Multiple checkboxes with group</h2>
  <label><input type="checkbox" bind:group={hobbies} value="reading" /> Reading</label>
  <label><input type="checkbox" bind:group={hobbies} value="sports" /> Sports</label>
  <label><input type="checkbox" bind:group={hobbies} value="music" /> Music</label>
  <p>Hobbies: {hobbies.length > 0 ? hobbies.join(', ') : 'None'}</p>
</main>

Important Notes

Checkbox bind:checked links to a boolean (true/false).

Radio buttons use bind:group to share one variable for the selected value.

Multiple checkboxes can share bind:group with an array to track all checked items.

Summary

Checkboxes use bind:checked for true/false values.

Radio buttons use bind:group to select one value from many.

Multiple checkboxes can bind to an array with bind:group to track all selections.