0Pricing
Sveltejs Academy · Lesson

bind:group for Radio and Checkbox Groups

Synchronize a group of related inputs to a single variable.

Radio Groups

For mutually exclusive options, use multiple radios with the same bind:group variable.

<input type="radio" bind:group={size} value="sm" /> S
<input type="radio" bind:group={size} value="md" /> M
<input type="radio" bind:group={size} value="lg" /> L

How It Works

The bound variable equals the value of the selected radio.

All lessons in this course

  1. bind:value for Text Inputs
  2. bind:checked for Checkboxes
  3. bind:group for Radio and Checkbox Groups
  4. bind:this for DOM Element References
← Back to Sveltejs Academy