In Svelte, when using "bind:group" in a radio input , the "checked" property is not getting set

Question

Context: I am new to Svelte and I am using the bind:group to assign true/false to a variable yes, but there is no default selection of any radio button. Using the checked="checked" in the radio input does not seem to work if there is a binding. It works fine when there is no binding.

REPL: https://svelte.dev/repl/28833b3a65d2417ea97c2594a5b3edbb?version=3.31.0 (I have used checked="checked" in the first radio input but it doesnt get checked)

Question: Is there a way to have both binding and the radio input checked by default, that is can there be a default binding and radio input selection?

Answer 1

Svelte will place in the value of the selected radiobutton in your variable. But you do not have a value defined on your inputs. This value will also be used to compare the currently selected value to the input's value and check/uncheck accordingly

<label>
    <input name="yes" value={true} bind:group={yes} type="radio">
    Yes! Send me regular email spam
</label>
<label>
    <input name="yes" value={false} bind:group={yes} type="radio">
    Yes! Send me regular email spam
</label>

(also don't forget to bind both inputs to the same variable)