Radio Group Component

<RadioGroup Items="@planItems"
            @bind-SelectedValue="selectedPlan" />

@code {
    private string? selectedPlan = "starter";

    private List<RadioGroup.RadioGroupItem> planItems = new()
    {
        new() { Value = "starter", Text = "Starter plan", SubText = "$10/month",
                Description = "Up to 10 users, 20GB storage, email support." },
        new() { Value = "business", Text = "Business plan", SubText = "$25/month",
                Description = "Up to 50 users, 100GB storage, priority email support." },
        new() { Value = "enterprise", Text = "Enterprise plan", SubText = "$50/month",
                Description = "Unlimited users, dedicated support, SLA." },
    };
}

<RadioGroup Items="@notificationItems"
            Indicator="radio"
            @bind-SelectedValue="selectedNotification" />

<RadioGroup Items="@sizeItems" Size="sm" @bind-SelectedValue="selectedSizeSm" />
<RadioGroup Items="@sizeItems" Size="md" @bind-SelectedValue="selectedSizeMd" />

@* Disable the entire group *@
<RadioGroup Items="@planItems" Disabled="true" SelectedValue="@starter" />

@* Or disable individual items via RadioGroupItem.Disabled = true *@
disabledItems = new()
{
    new() { Value = "standard",  Text = "Standard shipping" },
    new() { Value = "overnight", Text = "Overnight", Disabled = true },
};

descriptionItems = new()
{
    new() { Value = "personal", Text = "Personal",
            Description = "For individual use with basic features." },
    new() { Value = "team", Text = "Team",
            Description = "Collaborate with your team. Shared workspaces, 100GB storage." },
};

<RadioGroup Items="@descriptionItems"
            Indicator="radio"
            @bind-SelectedValue="selectedDesc" />

Radio Group Component

Checkbox indicator (default)

Radio indicator

Sizes

Disabled

With descriptions