Blazor InputRadio

Blazor InputRadio: Creating Custom Radio Button Groups

Blazor's InputRadio component enables us to effortlessly create radio button groups, offering users a selection of mutually exclusive options. By harnessing the power of @bind-Value, we can effortlessly link the component to our desired value in the underlying model, enhancing the user experience and synchronizing the UI with the underlying data.

Setting the Default Selection

To establish the default selection of a radio button, we can leverage the @bind-Value attribute in conjunction with a model property. Consider the following code:

<EditForm Model="_model">
    <InputRadioGroup @bind-Value="@_model.SelectedManufacturer">
        Manufacturer:
        <br>
        @foreach (var manufacturer in Manufacturers)
        {
            <InputRadio Value="manufacturer" />
            @manufacturer
            <br>
        }
    </InputRadioGroup>
</EditForm>

Here, @bind-Value binds the SelectedManufacturer property of the _model object to the InputRadioGroup component. We initialize this property with a default value in the constructor of our FormClass model:

class FormClass
{
  public  String SelectedManufacturer { get; set; } = "Tesla";
}

This ensures that when the form loads, the radio button corresponding to "Tesla" is selected by default. By altering the value of SelectedManufacturer in the model, we can dynamically update the selected radio button.

Creating Custom Radio Buttons

Blazor provides flexibility in styling and customizing radio buttons. We can achieve this by nesting the InputRadio component within a custom <label> element. This allows us to leverage CSS to tailor the appearance of our radio buttons, providing a cohesive look and feel that aligns with our application's design.

Here's an example of how we can achieve custom radio buttons:

<EditForm Model="_model">
    <div class="custom-radio-group">
        <label class="custom-radio">
            <InputRadio @bind-Value="@_model.SelectedManufacturer" Value="Ford" />
            <span class="custom-radio-button"></span>
            Ford
        </label>
        <label class="custom-radio">
            <InputRadio @bind-Value="@_model.SelectedManufacturer" Value="Toyota" />
            <span class="custom-radio-button"></span>
            Toyota
        </label>
        <label class="custom-radio">
            <InputRadio @bind-Value="@_model.SelectedManufacturer" Value="Tesla" />
            <span class="custom-radio-button"></span>
            Tesla
        </label>
    </div>
</EditForm>

In this example, we've wrapped each InputRadio component with a custom <label> that includes a <span> element. We can then use CSS to style the <span> element to resemble a radio button, while also customizing the font, colors, and layout to match our desired look and feel.

Note: Don't forget to include the necessary CSS classes in your style sheet to ensure the custom radio buttons are displayed correctly.

Handling Form Submission

Upon submitting the form, we need to ensure that the selected radio button value is properly captured and processed. This can be achieved by handling the OnSubmit event of the <EditForm> component.

<EditForm Model="_model" OnSubmit="SubmitForm">
    <InputRadioGroup @bind-Value="@_model.SelectedManufacturer">
        ...
    </InputRadioGroup>
    <button type="submit">Submit</button>
</EditForm>

In the code-behind, we can define the SubmitForm method to handle the form submission and access the selected radio button value:

public async Task SubmitForm()
{
    // _model.SelectedManufacturer now contains the selected value
}

The selected value of the radio button group, stored in the _model.SelectedManufacturer property, can then be utilized for further processing, data storage, or API calls, facilitating seamless interaction with the server.

Conclusion

Blazor's InputRadio component empowers us to effortlessly create custom radio button groups, enhancing user experience and enabling intuitive data selection. By leveraging the @bind-Value attribute, we can effortlessly link the component to our desired value in the underlying model, ensuring seamless synchronization between the UI and the underlying data. Additionally, the ability to customize the appearance of radio buttons through CSS provides flexibility in creating a cohesive and visually appealing user interface.