<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;
    }
}

@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;
    }
}

<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; }
    }
}

<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; }
    }
}

<TelerikRadioGroup Data="@RadioData"
                   @bind-Value="@ChosenOption"
                   ValueField="Child.Id"
                   TextField="Child.Text">
</TelerikRadioGroup>

@code {
    public int ChosenOption { get; set; }

    public class Parent<TItem>
    {
        public TItem Content { get; set; }

        public Parent(TItem item)
        {
            Content = item;
        }
    }

    public class Child
    {
        public int Id { get; set; }
        public string Text { get; set; }

        public Child(int id, string text)
        {
            Id = id;
            Text = text;
        }
    }

    public List<Parent<Child>> RadioData { get; set; } = new List<Parent<Child>>();

    protected override void OnInitialized()
    {
        RadioData.Add(new Parent<Child>(new Child(0, "Item 1")));
        RadioData.Add(new Parent<Child>(new Child(1, "Some text")));
        RadioData.Add(new Parent<Child>(new Child(2, "Other text")));
        RadioData.Add(new Parent<Child>(new Child(3, "Third text")));
        base.OnInitialized();
    }
}