Progress® Telerik® UI for Blazor Feedback Portal

Completed

Last Updated: 14 Jul 2026 17:30 by ADMIN

Release 2026 14.1.0 (Jul)

Support for disabled items

Created by: Mikanyg

Comments: 3

Category: RadioGroup

Type: Feature Request

Support for disabled items

I would like to be able to disable one or more radio buttons in the RadioGroup.

=====

TELERIK EDIT

In the meantime, consider the following workaround, which relies on CSS and RadioGroup ItemTemplate.

<h4>Default Value Disabled</h4>

RadioGroupValue1: @RadioGroupValue1

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue1"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue1;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<h4>No Default Value</h4>

RadioGroupValue2: @RadioGroupValue2

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue2"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue2;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<style>
    .k-radio-list-item:has(.disabled-radio-option) {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
        gap: 0;
    }

    .disabled-radio-option {
        display: flex;
        align-items: center;
        align-content: center;
        gap: var(--kendo-spacing-1);
    }

    .k-radio-list-item:has(.disabled-radio-option) input:not(.fake) {
        display: none;
    }
</style>

@code{
    private int RadioGroupValue1 { get; set; } = 2;
    private int RadioGroupValue2 { get; set; }

    private List<RadioModel> Options { get; set; } = new List<RadioModel>
    {
        new RadioModel { Id = 1, Text = "Option 1" },
        new RadioModel { Id = 2, Text = "Option 2", Enabled = false },
        new RadioModel { Id = 3, Text = "Option 3" },
        new RadioModel { Id = 4, Text = "Option 4", Enabled = false },
        new RadioModel { Id = 5, Text = "Option 5" },
    };

    public class RadioModel
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public bool Enabled { get; set; } = true;
    }
}

Completed

Last Updated: 06 Dec 2022 09:38 by ADMIN

Release 4.0.0 (18 Jan 2023) (R1 2023)

ItemTemplate for Blazor TelerikRadioGroup component

Created by: Nasoloniaina

Comments: 5

Category: RadioGroup

Type: Feature Request

ItemTemplate for Blazor TelerikRadioGroup component

I would like to add icon to TelerikRadioGroup instead of only text.

Completed

Last Updated: 23 May 2025 08:32 by ADMIN

Release 9.0.0

FocusAsync Not Working

Created by: Nicholas

Comments: 4

Category: RadioGroup

Type: Bug Report

FocusAsync Not Working

The RadioGroup's FocusAsync() method does not work. To reproduce, run this example and press the button: https://docs.telerik.com/blazor-ui/components/radiogroup/overview#radiogroup-reference-and-methods

===

A possible workaround is to use JavaScript to focus the first or the selected <input> element:

@inject IJSRuntime js

<TelerikButton OnClick="@FocusRadioGroup">Focus RadioGroup</TelerikButton>

<TelerikRadioGroup Data="@RadioGroupData"
                   Class="my-radiogroup"
                   @bind-Value="@RadioGroupValue"
                   ValueField="@nameof(ListItem.Id)"
                   TextField="@nameof(ListItem.Text)">
</TelerikRadioGroup>

@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">function focusRadio(RadioGroupValue) {
        var mrg = RadioGroupValue == null ?
            document.querySelector(".my-radiogroup .k-radio-list-item input") :
            document.querySelector(`.my-radiogroup .k-radio-list-item input[value='${RadioGroupValue}']`);
        if (mrg) {
            mrg.focus()
        }
    }</script>

@code{
    private int? RadioGroupValue { get; set; }

    List<ListItem> RadioGroupData { get; set; } = new List<ListItem>() {
        new ListItem { Id = 1, Text = "Foo" },
        new ListItem { Id = 2, Text = "Bar" },
        new ListItem { Id = 3, Text = "Baz" }
    };

    private async Task FocusRadioGroup()
    {
        await Task.Delay(1);

        await js.InvokeVoidAsync("focusRadio", RadioGroupValue);
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

Completed

Last Updated: 02 Mar 2022 15:34 by ADMIN

Release 3.2.0

RadioGroup cannot use the AriaLabelledBy parameter

Created by: Alex

Comments: 0

Category: RadioGroup

Type: Bug Report

RadioGroup cannot use the AriaLabelledBy parameter

There is an attribute called AriaLabelledBy available on the control but it does not work. It would be good for the AriaLabelledBy attribute to do what it is supposed to do and make it work like the following code:

<h3 id="grouplabel1">Chosen gender: @( ChosenGender == 0 ? "no selection yet" : ChosenGender.ToString() )</h3>
<TelerikRadioGroup Data="@GenderOptions"
                   @bind-Value="@ChosenGender"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)" AriaLabelledBy="grouplabel1">
</TelerikRadioGroup>

@code {
    TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }

    int ChosenGender { get; set; }

    List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
    {
        new GenderModel { GenderId = 1, GenderText = "Female" },
        new GenderModel { GenderId = 2, GenderText = "Male" },
        new GenderModel { GenderId = 3, GenderText = "Other" },
        new GenderModel { GenderId = 4, GenderText = "Prefer not to say" },
    };

    public class GenderModel
    {
        public int GenderId { get; set; }
        public string GenderText { get; set; }
    }
}

----------ADMIN EDIT----------

A possible workaround is to wrap the RadioGroup inside a normal div and use the normal HTML aria-labelledby attribute:

<div role="radiogroup" aria-labelledby="group_label_1">
    <h3 id="group_label_1" >Chosen gender: @( ChosenGender == 0 ? "no selection yet" : ChosenGender.ToString() )</h3>
<br />

<TelerikRadioGroup Data="@GenderOptions"
                   @bind-Value="@ChosenGender"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)">
</TelerikRadioGroup>
</div>

@code{
    TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }

    int ChosenGender { get; set; }

    List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
    {
        new GenderModel { GenderId = 1, GenderText = "Female" },
        new GenderModel { GenderId = 2, GenderText = "Male" },
        new GenderModel { GenderId = 3, GenderText = "Other" },
        new GenderModel { GenderId = 4, GenderText = "Prefer not to say" },
    };

    public class GenderModel
    {
        public int GenderId { get; set; }
        public string GenderText { get; set; }
    }
}