RadioInput

The RadioInput component is used to capture a boolean checked state with Bulma's native radio styling and Blazor data binding.

API Documentation

How it works #

The RadioInput component wraps a native radio input in Bulma's radio label pattern, making it easy to compose related radio choices with Blazor-friendly checked-state handling.

How to use:
  1. Add one or more RadioInput components to your page.
  2. Set the same Name value for related options that should behave as one radio group.
  3. Render the inline label text or markup between the component tags.
This demo shows a simple Yes/No radio group built from two RadioInput components.
Selected answer: Yes
<div class="control">
    <RadioInput Name="how-it-works-answer"
                Value="@isYesSelected"
                ValueChanged="@(value => OnAnswerChanged(true, value))">
        Yes
    </RadioInput>
    <RadioInput Name="how-it-works-answer"
                Value="@isNoSelected"
                ValueChanged="@(value => OnAnswerChanged(false, value))">
        No
    </RadioInput>
</div>

<div class="mt-2">Selected answer: @selectedAnswer</div>

@code {
    private bool isYesSelected = true;
    private bool isNoSelected;

    private string selectedAnswer = "Yes";

    private void OnAnswerChanged(bool isYes, bool value)
    {
        if (!value)
            return;

        isYesSelected = isYes;
        isNoSelected = !isYes;
        selectedAnswer = isYes ? "Yes" : "No";
    }
}

Disable #

The RadioInput component can be disabled to prevent user interaction while still displaying the current checked option.

How to use:
  1. Add the related RadioInput components to your page.
  2. Set Disabled="true" on the radios that should be non-interactive.
  3. Keep the same Name value when the disabled radios belong to one group.
This demo shows how to render a disabled radio group. 
<div class="control">
    <RadioInput Name="disabled-contact-method" Value="true" Disabled="true">
        Email
    </RadioInput>
    <RadioInput Name="disabled-contact-method" Value="false" Disabled="true">
        SMS
    </RadioInput>
</div>

Validations #

Integrate RadioInput with Blazor's form validation system by binding it inside an EditForm and validating the checked state with data annotations.

How to use:
  1. Wrap the component in an EditForm and bind it with @bind-Value.
  2. Add DataAnnotationsValidator and a ValidationMessage for the same property.
  3. Use a validation attribute such as Range to require a checked state before form submission.
This demo shows how to validate a radio selection before submission.
Select the radio option and submit the form.
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms

<style>
    .radio.valid.modified {
        color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
    }

    .radio.valid.modified input {
        outline: 1px solid hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
        outline-offset: 0.15rem;
    }

    .radio.invalid {
        color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
    }

    .radio.invalid input {
        outline: 1px solid hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
        outline-offset: 0.15rem;
    }

    .validation-message {
        color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />

    <div style="max-width: 24rem;">
        <RadioInput Name="support-plan"
                    @bind-Value="subscription.AcceptSupportPlan">
            I want the primary support plan
        </RadioInput>
        <ValidationMessage For="@(() => subscription.AcceptSupportPlan)" />
    </div>

    <Button Class="mt-3" Color="ButtonColor.Primary" Type="ButtonType.Submit" Size="ButtonSize.Small">
        Submit
    </Button>
</EditForm>

<div class="mt-3">@resultMessage</div>

@code {
    private SubscriptionModel subscription = new();
    private EditContext? editContext;

    private string resultMessage = "Select the radio option and submit the form.";

    protected override void OnInitialized()
    {
        editContext = new EditContext(subscription);
        base.OnInitialized();
    }

    private void OnValidSubmit()
    {
        resultMessage = "Submitted selection: primary support plan.";
    }

    private sealed class SubscriptionModel
    {
        [Range(typeof(bool), "true", "true", ErrorMessage = "Please select the support plan option.")]
        public bool AcceptSupportPlan { get; set; }
    }
}

Events: ValueChanged #

The RadioInput component exposes a ValueChanged event, allowing you to react whenever the radio becomes checked.

How to use:
  1. Set the Value parameter to the current checked state.
  2. Handle the ValueChanged callback to update your page state when the value changes.
  3. Use the updated checked state elsewhere in your UI as needed.
This demo shows how to handle checked-state changes through the ValueChanged event.
Selected value: False
<RadioInput Value="@receiveProductUpdates"
            ValueChanged="OnValueChanged">
    Receive product updates
</RadioInput>

<div class="mt-2">Selected value: @receiveProductUpdates</div>

@code {
    private bool receiveProductUpdates;

    private void OnValueChanged(bool value)
    {
        receiveProductUpdates = value;
    }
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!