Last Updated: 20 Nov 2023 11:26 by ADMIN
Created on: 01 Jun 2021 11:10
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.



The CSS workaround below uses the nth-child selector. In the example, I have disabled the third and fourth options and you can use it as a base and extend that sample in your own application.

    .disabled-items li:nth-child(3),
    .disabled-items li:nth-child(4) {
        outline: none;
        cursor: default;
        opacity: 0.6;
        -webkit-filter: grayscale(0.1);
        filter: grayscale(0.1);
        pointer-events: none;
        box-shadow: none;

<TelerikRadioGroup Data="@GenderOptions"

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

    int ChosenGender { get; set; }

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

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


Hristian Stefanov
Posted on: 20 Nov 2023 11:26


Thank you for showing your interest in the feature.

You can subscribe to the item to receive email notifications for status updates.

Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Posted on: 14 Nov 2023 12:40
Highly desirable!
Posted on: 16 Jul 2021 19:42
This would would be very useful and inline with other telerik blazor controls that support like how the telerik blazor contextmenu handles this.