Input type="radio" or "checkbox" group binding does not work

[bestguy]

bind:group={...} does not work with Input. For example:

<script>
  let scoops = 1;
</script>

<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>

https://svelte.dev/examples#group-inputs

[macsupport]

Likewise, on:input="{...} does not work with <Input type= "number" but does with <input type="number"
Here is what I am using:

<Row>
    <Col> <FormGroup>
    <Label for="Pounds">Pounds</Label>
    <Input value={l} on:input="{e => setBothFromL(e.target.value)}" min="0" 
      type="number"
      name="Pounds"
      id="Pounds"
      placeholder="lbs" />
  </FormGroup></Col>
    <Col> <FormGroup>
    <Label for="Kilogram">Kilogram</Label>
    <Input value={k} on:input="{e => setBothFromK(e.target.value)}" min="0"
      type="number"
      name="Kilogram"
      id="Kilogram"
      placeholder="kgs" />
  </FormGroup></Col>
  </Row>

[bestguy]

Thanks @macsupport , this is tracked in #36 and plan to support soon, especially for common ones like input, change, hover, etc.

However the "official" way to use Input is:

 <Input
      bind:value={k}
      min="0"
      type="number"
      name="Kilogram"
      id="Kilogram"
      placeholder="kgs"
/>

and you'd call setBothFromK when value changes. Let me know if this works for you, and will also fix #36 hopefully soon.

[bestguy]

Am addressing common Input events with: #72
Will publish soon after merge.

[bestguy]

@macsupport Your Input use case should be fixed in sveltestrap@3.2.7

[lovetoast]

Hi @bestguy first, thanks for this library!

I don't think this is fixed though, certainly, I tested and it doesn't work and further to that, in Input.d.ts, there is not a group option in

IInputProps

[bestguy]

Hi @lovetoast ,
Sorry my comment about "fixed in 3.2.7" was related to macsupport's side comment about on:input.

The group issue is related to sveltejs/svelte#2308 where Svelte does not support bind:group with nested components like Sveltestrap.

Would love to know a workaround or fix if you find one!

[bestguy]

There is a workaround suggestion from community: sveltejs/svelte#2308 (comment)

I'll see if it's something we could add to sveltestrap.

[lovetoast]

@bestguy thanks for the fast response, that was actually going to be my suggestion haha!

[DenverEllis]

@bestguy

Sorry to bump what looks like a dead thread, but I see this is still open and wonder where it is at. My experience is I am able to bind:group for radio buttons, but not check boxes and digging lead me here.

[igorsantos07]

I wonder if what @DenverEllis commented (and I also experienced) is related to missing bind:group here... I tried adding to my copy of the package, but no clue how to actually build that to get it into my project lol

Besides that, there's also a bad conflict of IDs; in absence of a given id, it uses the raw label, and having more than one input with the same label causes clashing. Since you're creating something that must be unique in the page, it's advised to add a random string to it, to avoid unintended clashes for the user.