What is the proper way to use Blazor InputRadio with a string value?

To properly use Blazor's InputRadio component with a string value, you need to bind it to a string property and ensure that the Value attribute of the InputRadio matches the possible string values you want to select.

Here's a comprehensive guide and example:

1. Define a String Property:

- In your Blazor component, declare a string property that will hold the selected value.

2. Use `InputRadio` Components:

- Create multiple InputRadio components, each with a unique Value attribute that corresponds to one of the possible string values.

- Bind the @bind-Value attribute of the radio group to the string property you defined.

3. Example Code:

Here's a complete example demonstrating how to implement this:

Example.razor:

@page "/example"

<h3>Select an Option:</h3>

<InputRadioGroup @bind-Value="SelectedValue">
  <InputRadio Value="option1" Id="option1" /> <label For="option1">Option 1</label><br>
  <InputRadio Value="option2" Id="option2" /> <label For="option2">Option 2</label><br>
  <InputRadio Value="option3" Id="option3" /> <label For="option3">Option 3</label><br>
</InputRadioGroup>

<p>Selected Value: @SelectedValue</p>

@code {
  private string SelectedValue { get; set; } = "option1"; // Default value
}

Explanation:

- The `@page "/example"` directive defines the route for this component.

- InputRadioGroup is used to group the radio buttons. The @bind-Value attribute binds the group to the SelectedValue property.

- Each InputRadio component has a Value attribute set to a specific string ("option1", "option2", "option3"). When a radio button is selected, the SelectedValue property is updated with the corresponding string value.

- The SelectedValue property is initialized with a default value ("option1" in this case). This ensures that one of the radio buttons is selected by default.

4. Important Considerations:

- Data Types: Make sure the type of the Value attribute on InputRadio matches the type of the property you are binding to (in this case, both are strings).

- Default Value: It’s good practice to initialize the bound property with a default value to ensure that one of the radio buttons is pre-selected.

- Uniqueness: Ensure each InputRadio has a unique Value within the group to avoid unexpected behavior.

By following these guidelines, you can effectively use Blazor's InputRadio component with string values to create selectable options in your Blazor applications. Remember to use InputRadioGroup to ensure proper grouping and binding behavior.

Learn more about this