Framework7 Svelte - Adding bind: to a radio or checkbox

Questions
1

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}

2

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

3

Thanks. That was what I was doing initially.

4

Or you can make a copy of the ListItem component and modify it to support dual binding.
Here are some of the components I modified myself:

Feel free to copy them.

Here’s how you would use the ListItem for example:

<script>
import ListItem from './path/to/the/modified/list-item.svelte';
.
.
.
</script>

<List mediaList>
   <ListItem
      checkbox
      bind:checked={$rememberMe}
      subtitle="Remember me"
   />
   <ListItem
      checkbox
      bind:checked={$policyAccepted}
      subtitle="I've read the terms of service"
   />
</List>

Obviously don’t import both components at the same time.
It won’t crash, but it’s a waste to import both and just use one of them.
So don’t do this:

<script>
import ListItemModified from './path/to/the/modified/list-item.svelte';
import { ListItem } from 'framework7-svelte';
.
.
.
</script>

Same thing with the ListInput component, instead of

bind:checked={myVariable}

you bind the value:

bind:value={myVariable}