Change the appearance of an InputRadio in a Blazor page

Question

I'm new to Blazor and just trying my first steps in VS2022 with a client-side WA app.

I do not like the appearance of the built-in <InputRadio> component. What I want to achieve was a button-styled radio group.

I visited the original source on github (thank you, MicroSoft, for going OS!) and found, that the appearance seems to be built here:

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    Debug.Assert(Context != null);

    builder.OpenElement(0, "input");
    builder.AddMultipleAttributes(1, AdditionalAttributes);
    builder.AddAttributeIfNotNullOrEmpty(2, "class", AttributeUtilities.CombineClassNames(AdditionalAttributes, Context.FieldClass));
    builder.AddAttribute(3, "type", "radio");
    builder.AddAttribute(4, "name", Context.GroupName);
    builder.AddAttribute(5, "value", BindConverter.FormatValue(Value?.ToString()));
    builder.AddAttribute(6, "checked", Context.CurrentValue?.Equals(Value));
    builder.AddAttribute(7, "onchange", Context.ChangeEventCallback);
    builder.CloseElement();
}

My first idea was to inherit from this class and use an own override for BuildRenderTree() . But the InputRadioContext needed for Context is internal and this looks like a dead end now.

I tried to use buttons within <InputRadioGroup> , but was not able to deal with the events properly.

The question: How can I change the appearance of <InputRadio> or create something like radio groups myself?

Answer 1

Brian Parker's relevant hint pushed me to this solution, which works fine:

<EditForm Model=@someViewModel>
   <InputRadioGroup @bind-Value=@someViewModel.TheInstance_via_Id>
     @foreach (SomeClass e in someList)
     {
       <InputRadio class="btn-check" id=@e.Id Value=@e.Id />
       <label class="btn btn-outline-primary" for=@e.Id>@e</label>
     }
   </InputRadioGroup>
</EditForm>

Without a </br> tag the buttons appear as cloud of chips .

Hint: First I tried to use the object itself in @bind-Value but found, that the magic binding does not support all types. That's why I added an Id-based binding property to the ViewModel like this:

    //the actual property returning an object's instance
    public SomeClass TheInstance{ get; set; } = new SomeClass(Guid.NewGuid(), "n.A.");

    //helps to magically bind <InputRadio> via Guid-Property
    public Guid TheInstance_via_Id
    {
        //returns the actual object's id 
        get => TheInstance.Id;
        //re-sets the actual object from a shared context store
        set => TheInstance= BaseDataContext.ListOfInstances[value];
    }