El componente MudRadioGroup en la biblioteca MudBlazor permite crear botones de selección única en aplicaciones Blazor. Esta guía explora técnicas para configurar su disposición visual y manejar estados de manera eficiente.

Análisis de la Estructura del Componente

La lógica principle de MudRadioGroup reside en archivos como MudRadioGroup.razor.cs, que define una clase genérica para manejar la selección. Los botones individuales se implementan mediante MudRadio.razor.cs, usando métodos para registrarse y actualizar el estado del grupo.

Configuración de la Disposición Visual

El atributo Orientation controla si los botones se alinean vertical u horizontalmente. Un ejemplo básico muestra cómo establecer una disposición vertical con valores predeterminados:

<MudRadioGroup T="string" @bind-Value="valorElegido" Orientation="Orientation.Vertical">
    <MudRadio Value="alpha">Opción Alfa</MudRadio>
    <MudRadio Value="beta">Opción Beta</MudRadio>
    <MudRadio Value="gamma">Opción Gamma</MudRadio>
</MudRadioGroup>

Se pueden aplicar clases CSS personalizadas para ajustar estilos, manteniendo la coherencia visual mediante atributos como Class.

Gestión de Estados mediante Enlace Bidireccional

Enlace Básico con Valores Iniciales

El decorador @bind-Value sincroniza el estado del componente con una variable en el código. A continuación, un ejemplo con un valer inicial asignado:

<MudRadioGroup T="string" @bind-Value="seleccionActual">
    <MudRadio Value="x">Elemento X</MudRadio>
    <MudRadio Value="y">Elemento Y</MudRadio>
</MudRadioGroup>

@code {
    private string seleccionActual = "y"; // Valor por defecto
}

Sincronización entre Múltiples Grupos

Dos grupos pueden compartir la misma variable para mantener la selección unificada. Esto facilita la creación de interfaces donde diferentes secciones reflejan opciones relacionadas:

<MudRadioGroup T="string" @bind-Value="opcionCompartida">
    <!-- Contenido del primer grupo -->
</MudRadioGroup>
<MudRadioGroup T="string" @bind-Value="opcionCompartida">
    <!-- Contenido del segundo grupo -->
</MudRadioGroup>

Restablecimiento de la Selección

Para limpiar la elección actual, se puede asignar null a la variable enlazada, como se muestra en este botón de reinicio:

<MudButton OnClick="() => seleccionActual = null">Borrar Selección</MudButton>

Controles Avanzados de Interacción

Los estados Disabled y ReadOnly restringen la interacción del usuario. El primero desactiva visualmente y funcionalmente los botones, mientras que el segundo permite ver pero no modificar la selección. Un ejemplo incluye interruptores para alternar estos estados:

<MudRadioGroup T="string" Disabled="@bloqueado" ReadOnly="@soloLectura">
    <!-- Botones del grupo -->
</MudRadioGroup>
<MudSwitch @bind-Checked="bloqueado" Label="Deshabilitar" />
<MudSwitch @bind-Checked="soloLectura" Label="Solo Lectura" />

El componente también soporta navegación por teclado, con teclas como Enter para seleccionar, Backspace para borrar y Tab para mover el foco entre opciones.

Ejemplo Integrado: Panel de Configuración de Preferencias

Este caso combina diseño y gestión de estado para un panel de preferencias con dos grupos independientes: uno para temas visuales y otro para notificaciones.

<MudCard>
    <MudCardContent>
        <MudTypography variant="h6">Preferencias del Usuario</MudTypography>
        
        <MudRadioGroup T="string" @bind-Value="temaVisual" Class="mt-4">
            <MudRadio Value="claro" Color="Color.Primary">Modo Claro</MudRadio>
            <MudRadio Value="oscuro" Color="Color.Secondary">Modo Oscuro</MudRadio>
            <MudRadio Value="auto" Color="Color.Tertiary">Automático</MudRadio>
        </MudRadioGroup>
        
        <MudRadioGroup T="string" @bind-Value="configNotificaciones" Orientation="Orientation.Horizontal" Class="mt-6">
            <MudRadio Value="todas" Ripple="false">Todas las Alertas</MudRadio>
            <MudRadio Value="importantes" Ripple="false">Solo Importantes</MudRadio>
            <MudRadio Value="ninguna" Ripple="false">Desactivar</MudRadio>
        </MudRadioGroup>
    </MudCardContent>
</MudCard>

@code {
    private string temaVisual = "auto";
    private string configNotificaciones = "importantes";
}

Validación y Recomendaciones Prácticas

Las pruebas unitarias en MudBlazor cubren escenarios como estados iniciales, sincronización entre grupos y manejo de excepciones. Es aconsejable revisar estos tests para garantizar robustez en distintas condiciones de uso. Además, la personalización de estilos mediante clases CSS permite adaptar el componente a necesidades específicas sin alterar la funcionalidad.