Framework7 Svelte - Adding bind: to a radio or checkbox

Using Framework7 svelte, how would one bind a group of radios? In Svelte, one would do this:

<label>
<input type=radio bind:group={scoops} value={1}>
One scoop
</label>

<label>
<input type=radio bind:group={scoops} value={2}>
Two scoops
</label>

<label>
<input type=radio bind:group={scoops} value={3}>
Three scoops
</label>

How to do this with Framework7, since adding bind:group={scoops} to a <ListItem> don’t work?

  <BlockTitle>Radio Group</BlockTitle>
  <List>
  <ListItem radio title="Books" name="demo-radio" value="Books" checked></ListItem>
   <ListItem radio title="Movies" value="Movies" name="demo-radio"></ListItem>
  <ListItem radio title="Food" value="Food" name="demo-radio"></ListItem>
  <ListItem radio title="Drinks" value="Drinks" name="demo-radio"></ListItem>
  </List>

Same question for checkboxes and adding bind:checked={yes}

Such syntax is not support on components in Svelte. Use HTML markup instead of use combination of checked and onChange props

Thanks. That was what I was doing initially.