RadioListInput

The RadioListInput component is used to capture a single selection with Bulma's radio list styling, typed data items, and Blazor-friendly binding.

API Documentation

How it works #

The RadioListInput component renders a typed collection of Bulma-styled radio buttons and binds the selected value to your Blazor state through a single component.

How to use:
  1. Create a list of RadioListInputItem<TValue> items for the available choices.
  2. Add the RadioListInput component and set the matching TValue type.
  3. Bind the current selection with @bind-Value.
This demo shows the default single-select behavior of the RadioListInput component.

Selected attendance: going

<RadioListInput TValue="string"
                Items="@attendanceItems"
                @bind-Value="@selectedAttendance" />

<p class="mt-3">
    Selected attendance: @selectedAttendance
</p>

@code {
    private readonly List<RadioListInputItem<string>> attendanceItems =
    [
        new("going", "Going"),
        new("not-going", "Not going"),
        new("maybe", "Maybe")
    ];

    private string selectedAttendance = "going";
}

Disable #

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

How to use:
  1. Add the RadioListInput component to your page.
  2. Set Disabled="true" to make the entire radio list non-interactive.
  3. Pass the same typed items and selected value as usual.
This demo shows how to render the entire radio list in a disabled state.

Selected contact method: email

<RadioListInput TValue="string"
                Items="@contactMethodItems"
                Value="@selectedContactMethod"
                Disabled="true" />

<p class="mt-3">
    Selected contact method: @selectedContactMethod
</p>

@code {
    private readonly List<RadioListInputItem<string>> contactMethodItems =
    [
        new("email", "Email"),
        new("sms", "SMS"),
        new("phone", "Phone")
    ];

    private string selectedContactMethod = "email";
}

Conditional disable #

Individual radio items can be disabled by setting the Disabled property on specific RadioListInputItem<TValue> entries.

How to use:
  1. Create your item collection in code.
  2. Set Disabled = true only for the entries that should not be selectable.
  3. Pass the updated collection to the Items parameter.
This demo illustrates how to disable only selected radio items based on your application rules.

Selected shipping method: standard

<RadioListInput TValue="string"
                Items="@shippingItems"
                @bind-Value="@selectedShippingMethod" />

<p class="mt-3">
    Selected shipping method: @selectedShippingMethod
</p>

@code {
    private readonly List<RadioListInputItem<string>> shippingItems =
    [
        new("standard", "Standard"),
        new("express", "Express"),
        new("overnight", "Overnight") { Disabled = true }
    ];

    private string selectedShippingMethod = "standard";
}

Validations #

Integrate RadioListInput with Blazor's form validation system by using it inside an EditForm and binding the selected value to a model property with validation attributes.

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 Required to require a selection before form submission.
This demo shows how to validate a radio list selection before submission.
Select a support plan 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;">
        <RadioListInput TValue="string"
                        Items="@supportPlanItems"
                        @bind-Value="subscription.SupportPlan" />
        <ValidationMessage For="@(() => subscription.SupportPlan)" />
    </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 a support plan and submit the form.";

    private readonly List<RadioListInputItem<string>> supportPlanItems =
    [
        new("basic", "Basic"),
        new("standard", "Standard"),
        new("premium", "Premium")
    ];

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

    private void OnValidSubmit()
    {
        resultMessage = $"Submitted support plan: {subscription.SupportPlan}";
    }

    private sealed class SubscriptionModel
    {
        [Required(ErrorMessage = "Please select a support plan.")]
        public string? SupportPlan { get; set; }
    }
}

Events: ValueChanged #

The RadioListInput component exposes a ValueChanged event, allowing you to react whenever the selected value changes.

How to use:
  1. Set the Value parameter to the current selection.
  2. Handle the ValueChanged callback to update your page state when the selection changes.
  3. Use the updated selected value elsewhere in your UI as needed.
This demo shows how to handle selection changes through the ValueChanged event.
Selected theme: system
<RadioListInput TValue="string"
                Items="@themeItems"
                Value="@selectedTheme"
                ValueChanged="OnValueChanged" />

<div class="mt-2">Selected theme: @selectedTheme</div>

@code {
    private readonly List<RadioListInputItem<string>> themeItems =
    [
        new("light", "Light"),
        new("system", "System"),
        new("dark", "Dark")
    ];

    private string selectedTheme = "system";

    private void OnValueChanged(string value)
    {
        selectedTheme = 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!