bind- value to doesn't work in radio button in blazor - forms

Question

For the following code, for some reason the selection of the radio buttons binds x.MyCapability with -> "on" instead of the label of the button (let's assume the labels of the radio element are *a ,*b and *c):
#foreach (var capability in myList)
{
<label>
<input type="radio" name="MyCapability" SelectedValue="MyCapability" #bind-value="x.MyCapability" />
#capability <text> </text>
</label>
}
how can I link x.MyCapability with a, b or c?
.NetCore 3.1

Answer 1

You are binding in a wrong way, here is the way you can
Your html
<div>Your Capability: #MyCapability</div>
<div>
#foreach (var capability in myList)
{
<div>
<label>#capability.MyCapability</label>
<input type="radio"
name="#capability.MyCapability"
#onchange=#(() => MyCapability = capability.MyCapability)
checked="#(capability.MyCapability==MyCapability)">
</div>
}
</div>
Here is the code behind
#code{
private string MyCapability = "a";
private List<Capabilities> myList = new()
{
new Capabilities()
{
MyCapability = "a"
},
new Capabilities()
{
MyCapability = "b"
},
new Capabilities()
{
MyCapability = "c"
}
};
public class Capabilities
{
public string MyCapability { get; set; }
}
}
When you select any option it will be update in above div