Group inputs

If you have multiple inputs relating to the same value, you can use bind:group along with the value attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.

Add bind:group to each input:

  1. <input type=radio bind:group={scoops} value={1}>

In this case, we could make the code simpler by moving the checkbox inputs into an each block. First, add a menu variable to the <script> block…

  1. let menu = [
  2.     'Cookies and cream',
  3.     'Mint choc chip',
  4.     'Raspberry ripple'
  5. ];

…then replace the second section:

  1. <h2>Flavours</h2>
  3. {#each menu as flavour}
  4.     <label>
  5.         <input type=checkbox bind:group={flavours} value={flavour}>
  6.         {flavour}
  7.     </label>
  8. {/each}

It’s now easy to expand our ice cream menu in new and exciting directions.