adding icons to a radio group in Blazor

Issue

I would like to have a mixture of icons and texts in options in a radio group just like: My code is like:

.rm-input-radio-group {
    display: flex;
    flex-direction: row;
    height: 100px;
}

    .rm-input-radio-group img {
        margin-left: 10px;
        margin-right: 10px;
    }

<div class="rm-input-radio-group">
    <EditForm Model="@rdOptions">
        <InputRadioGroup @bind-Value="@SelectedValue">
            @foreach (var option in rdOptions)
            {
                <InputRadio Value="@option.Value" /> <img src=@option.IconPath /> @option.Text <br />
            }
        </InputRadioGroup>
    </EditForm>
</div>

and the backend code:

[Parameter] public ProposalStatusType SelectedValue { get; set; } = ProposalStatusType.UnderReview;

readonly List<InputRadioGroupItemModel<ProposalStatusType>> rdOptions = new()
        {
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.UnderReview, "Currently being reviewed", "css/svg/icon-in-progress.svg"),
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.Disliked, "Dislike Proposal Option", "css/svg/icon-thumbdown.svg"),
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.Preferred, "Preferred Proposal Option", "css/svg/icon-thumbup.svg"),
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.AvailableForBooking, "Available for Booking Request", "css/svg/icon-bookings.svg"),
        };

However, the SelectedValue always remains the default/given value on the component call in the parent component. Do I miss anything?

Solution

Thanks Shuryno for the hint, that is true and I had to modify my code by first adding [Parameter] public EventCallback<OptionStatusType> OnSelectedValueChange { get; set; } which can notify the Parent component on selection changes (something like: <RMInputRadioGroup SelectedValue="@SelectedOptionStatus" OnSelectedValueChange="OnSelectedValueChange" CanApprove="@CanApprove"></RMInputRadioGroup> on the parent side) and also refactoring the child html as:

<div class="rm-input-radio-group">
    <EditForm Model="@RadioGroupItemModel">
        <InputRadioGroup Value="@SelectedValue" ValueChanged="@((OptionStatusType v) => ValueChanged(v))" ValueExpression="@( () => RadioGroupItemModel.Value )">
            @foreach (var option in rdOptions)
            {
                <InputRadio Value="@option.Value" style="outline: none !important;"/> <img src=@option.IconPath /> @option.Text <br />
            }
        </InputRadioGroup>
    </EditForm>
</div>

You can see I defined a more proper model called RadioGroupItemModel like:

protected InputRadioGroupItemModel<OptionStatusType> RadioGroupItemModel { get; set; }

and the class is:

public class InputRadioGroupItemModel<T>
    {
        #region Public Properties

        public string Text { get; set; }
        public string IconPath { get; set; }
        public T Value { get; set; }

        #endregion Public Properties

        #region Public Constructors

        public InputRadioGroupItemModel()
        {
        }

        public InputRadioGroupItemModel(T value, string text, string iconPath)
        {
            Value = value;
            Text = text;
            IconPath = iconPath;
        }

        #endregion Public Constructors
    }

and also as you can see on the code I had to replace @bind-Value="@SelectedValue" with Value="@SelectedValue" ValueChanged="@((OptionStatusType v) => ValueChanged(v))" ValueExpression="@( () => RadioGroupItemModel.Value )" where

protected void ValueChanged(OptionStatusType value)
        {
            OnSelectedValueChange.InvokeAsync(value);
        }

this works perfectly but keep it in mind that you need to override the styling on InputRadio (I did style="outline: none !important;") as Blazor EditForm will add a valid CSS class automatically on runtime which will add a border around the radio-buttons.

Answered By - Steve Shahbazi