Botones de radio

Los botones de radio, también llamados botones de opción, permiten que los usuarios seleccionen una opción entre una colección de dos o más opciones mutuamente excluyentes, aunque relacionadas. Los botones de radio siempre se usan en grupos y cada opción se representa mediante un botón de radio del grupo.

De manera predeterminada, no está seleccionado ningún botón de radio en un grupo RadioButtons. Es decir, todos los botones de radio están desactivados. Sin embargo, una vez que un usuario ha seleccionado un botón de radio, el usuario no puede anular su selección para restaurar el grupo a su estado original desactivado.

El comportamiento único de un grupo RadioButtons lo distingue de las casillas, que admiten la selección múltiple y la anulación de la selección, o la desactivación.

¿Es este el control adecuado?

Use botones de radio para permitir que los usuarios seleccionen entre dos o más opciones mutuamente excluyentes.

Use botones de radio cuando los usuarios necesiten ver todas las opciones antes de realizar una selección. Los botones de radio enfatizan todas las opciones por igual, lo que significa que algunas opciones pueden atraer más atención de la necesaria o deseada.

Salvo que todas las opciones se merezcan la misma atención, debería plantearse usar otros controles. Por ejemplo, para recomendar una única mejor opción para la mayoría de los usuarios y en la mayoría de las situaciones, use un cuadro combinado para mostrar la mejor opción como opción predeterminada.

Si solo hay dos opciones posibles que se pueden expresar claramente como una sola opción binaria, como on/off o yes/no, combínelas en una sola casilla o un control conmutador de alternancia. Por ejemplo, use una única casilla para "Acepto", en lugar de dos botones de radio para "Acepto" y "No acepto".

No use dos botones de opción para una única opción binaria:

En su lugar, utilice una casilla:

Use casillas cuando el usuario pueda seleccionar varias opciones.

Cuando las opciones de los usuarios se encuentran dentro de un intervalo de valores (por ejemplo, 10, 20, 30... 100), use un control deslizante.

Si hay más de ocho opciones, utilice un cuadro combinado.

Si las opciones disponibles se basan en el contexto actual de la aplicación o pueden variar dinámicamente, use un control de lista.

Recomendaciones

• Asegúrese de que tanto el objetivo como el estado actual de un conjunto de botones de radio sean explícitos.
• Limite la etiqueta de texto del botón de radio a una única línea.
• Si la etiqueta de texto es dinámica, piense en cómo cambiará el tamaño del botón automáticamente y qué sucederá con los elementos visuales que la rodean.
• Use la fuente predeterminada, salvo que se indique lo contrario en las directrices de su marca.
• No coloque dos grupos RadioButtons de lado. Cuando se colocan dos grupos RadioButtons uno al lado del otro, resulta difícil para los usuarios determinar qué botones pertenecen a uno u otro grupo.

Introducción de RadioButtons

RadioButtons frente a RadioButton

Hay dos maneras de crear grupos de botones de radio: RadioButtons y RadioButton.

• Se recomienda el control RadioButtons. Este control simplifica el diseño, controla la navegación y la accesibilidad del teclado, y admite el enlace a un origen de datos.
• Puede usar grupos de controles RadioButton individuales.

El acceso de teclado y el comportamiento de la navegación se han optimizado en el control RadioButtons. Estas mejoras ayudan a los usuarios avanzados de accesibilidad y de teclado a desplazarse por la lista de opciones de manera más rápida y sencilla.

Además de estas mejoras, el diseño visual predeterminado de los botones de radio individuales de un grupo RadioButtons se ha optimizado a través de la configuración automatizada de la orientación, el espaciado y los márgenes. Esta optimización elimina la necesidad de especificar estas propiedades, como quizá deba hacer cuando use un control de agrupación más primitivo, como StackPanel o Grid.

Navegación por un grupo RadioButtons

El control RadioButtons tiene un comportamiento de navegación especial que ayuda a los usuarios de teclado a navegar por la lista de manera más rápida y sencilla.

Foco de teclado

El control RadioButtons admite dos estados:

• No se ha seleccionado ningún botón de radio.
• Se ha seleccionado un botón de radio.

En las secciones siguientes se describe el comportamiento del foco en cada estado.

No se ha seleccionado ningún botón de radio.

Cuando no se selecciona ningún botón de radio, el primero de la lista obtiene el foco.

Nota:

El elemento que recibe el foco de tabulación en la navegación por tabulación inicial no está seleccionado.

Lista sin el foco de tabulación, sin ninguna selección

Lista con el foco de tabulación inicial, sin ninguna selección

Se ha seleccionado un botón de radio.

Cuando un usuario usa la tabulación en la lista y está seleccionado un botón de radio, dicho botón obtiene el foco.

Lista sin concentración en la pestaña inicial

Lista con concentración de tabulación inicial

Navegación mediante teclado

Para más información sobre los comportamientos generales de la navegación con el teclado, consulte Interacciones de teclado: navegación.

Cuando un elemento de un grupo RadioButtons ya tiene el foco, el usuario puede utilizar las teclas de dirección para la "navegación interna" entre los elementos del grupo. Las teclas de flecha arriba y abajo se mueven al elemento lógico "siguiente" o "anterior", tal y como se define en el marcado XAML. Las teclas de flecha izquierda y derecha se mueven espacialmente.

Disposiciones de navegación de una sola columna o fila

En una disposición de navegación de una sola columna o fila, la navegación con el teclado tiene el siguiente comportamiento:

Columna única

Las teclas flecha arriba y Flecha abajo se mueven entre los elementos.
La flecha izquierda y las teclas de dirección derecha no hacen nada.

Fila única

Las teclas de flecha izquierda y arriba se mueven al elemento anterior y las teclas de flecha derecha y abajo se mueven al elemento siguiente.

Disposiciones de navegación en varias columnas o filas

En una disposición de cuadrícula de varias columnas y varias filas, la navegación con el teclado produce este comportamiento:

Teclas de flecha izquierda y flecha derecha

Las teclas de flecha izquierda y flecha derecha mueven el foco horizontalmente entre los elementos de una fila.

Cuando el foco se encuentra en el último elemento de una columna y se presiona la tecla de flecha derecha o izquierda, el foco se mueve al último elemento de la columna siguiente o anterior (si existe).

Teclas de flecha arriba y flecha abajo

Las teclas de flecha arriba y flecha abajo mueven el foco verticalmente entre los elementos de una columna.

Cuando el foco se encuentra en el último elemento de una columna y se presiona la tecla de flecha abajo, el foco se mueve al primer elemento de la columna siguiente (si existe). Cuando el foco se encuentra en el primer elemento de una columna y se presiona la tecla de flecha arriba, el foco se mueve al último elemento de la columna anterior (si existe).

Para más información, consulte Interacciones de teclado.

Ajuste

El grupo RadioButtons no ajusta el foco de la primera fila o columna a la última, ni de la última fila o columna a la primera. Esto se debe a que, cuando los usuarios usan un lector de pantalla, se pierde la sensación de que haya límites y la indicación clara de dónde está el principio y el fin, lo que dificulta que los usuarios con discapacidad visual naveguen por la lista.

El control RadioButtons tampoco es compatible con la enumeración, porque está diseñado para contener un número razonable de elementos (consulte ¿Es este el control adecuado?).

La selección sigue el foco

Cuando los usuarios usan el teclado para navegar entre los elementos de una lista RadioButtons, cuando el foco se mueve de un elemento al siguiente, el elemento recién enfocado se selecciona y el elemento que anteriormente tenía el foco se desactiva.

Antes de la navegación con el teclado

Foco y selección antes de la navegación con el teclado.

Después de la navegación con el teclado

Foco y selección después de la navegación con el teclado, en el que la tecla de flecha abajo mueve el foco al botón de radio 3, lo selecciona y desactiva el botón de radio 2.

Puede desplazar el foco sin cambiar la selección mediante CTRL + teclas de dirección para navegar. Después de mover el foco, puede usar la barra espaciadora para seleccionar el elemento que tiene el foco actualmente.

Navegar con el panel de juego y el control remoto

Si usa un controlador para juegos o un control remoto de Xbox para moverse entre los botones de radio, el comportamiento "la selección sigue el foco" está deshabilitado y el usuario debe presionar el botón "A" para seleccionar el botón de radio que tiene el foco actualmente.

Comportamiento de accesibilidad

En la tabla siguiente se describe cómo el Narrador controla un grupo RadioButtons y lo que se anuncia. Este comportamiento depende de la forma en que un usuario ha establecido las preferencias de detalle del Narrador.

Acción	Anuncio del Narrador
El foco se mueve a un elemento seleccionado	" RadioButton name, seleccionado, x de N"
El foco se mueve a un elemento sin seleccionar (Si navega con teclas ctrl-flecha o controlador para juegos de Xbox, que indica que la selección no está siguiendo la concentración.)	"Control RadioButton name sin seleccionar; x de N"

Nota:

El nombre que el Narrador anuncia para cada elemento es el valor de la propiedad adjunta AutomationProperties.Name si está disponible para el elemento; de lo contrario, es el valor devuelto por el método ToString del elemento.

x es el número del elemento actual. N es la cantidad total de elementos del grupo.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

El control RadioButtons para aplicaciones para UWP se incluye como parte de WinUI 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo WinUI 2. Las API para estos controles existen en los espacios de nombres Windows.UI.Xaml.Controls y Microsoft.UI.Xaml.Controls.

• API de UWP: clase RadioButton, propiedad IsChecked, evento Checked
• Api de WinUI 2: clase RadioButtons, propiedad SelectedItem, propiedad SelectedIndex, Evento SelectionChanged

Abra la aplicación Galería de WinUI 3 y consulte el botón en acción.

La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.

Existen dos maneras de crear grupos de botones de radio.

• A partir de la versión WinUI 2.3, se recomienda el control RadioButtons. Este control simplifica el diseño, controla la navegación y la accesibilidad del teclado, y admite el enlace a un origen de datos.
• Puede usar grupos de controles RadioButton individuales. Si la aplicación no usa WinUI 2.3 o una versión posterior, esta es la única opción.

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos, las plantillas y las características más actuales de todos los controles.

Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la Biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulte Introducción a la Biblioteca de interfaz de usuario de Windows 2 para obtener más información.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:RadioButtons />

Creación de un grupo RadioButtons de WinUI

• API importantes: clase RadioButtons, propiedad SelectedItem, propiedad SelectedIndex, evento SelectionChanged, clase RadioButton, propiedad IsChecked, evento Checked
• Abra la aplicación Galería de WinUI 2 y vea RadioButton en acción. La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.

El control RadioButtons usa un modelo de contenido similar a un control ItemsControl. Esto significa que puede hacer lo siguiente:

• Para rellenarlo, agregue elementos directamente a la colección Items o enlace datos a su propiedad ItemsSource.
• Use las propiedades SelectedIndex o SelectedItem para obtener y establecer la opción seleccionada.
• Controle el evento SelectionChanged para que se realice una acción cuando se elija una opción.

Aquí se declara un control RadioButtons simple con tres opciones. La propiedad Header está establecida para asignar al grupo una etiqueta y la propiedad SelectedIndex está establecida para proporcionar una opción predeterminada.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged">
    <x:String>Red</x:String>
    <x:String>Green</x:String>
    <x:String>Blue</x:String>
</RadioButtons>

El resultado tiene el aspecto siguiente:

Para realizar una acción cuando el usuario selecciona una opción, controle el evento SelectionChanged. Aquí, cambia el color de fondo de un elemento Border denominado "ExampleBorder" (<Border x:Name="ExampleBorder" Width="100" Height="100"/>).

private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ExampleBorder != null && sender is RadioButtons rb)
    {
        string colorName = rb.SelectedItem as string;
        switch (colorName)
        {
            case "Red":
                ExampleBorder.Background = new SolidColorBrush(Colors.Red);
                break;
            case "Green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
                break;
        }
    }
}

Sugerencia

También puede obtener el elemento seleccionado de la propiedad SelectionChangedEventArgs.AddedItems. Solo habrá un elemento seleccionado, en el índice 0, por lo que podría obtener el elemento seleccionado de la siguiente forma: string colorName = e.AddedItems[0] as string;.

Estados de selección

Un botón de radio tiene dos estados: seleccionado o desactivado. Si se selecciona una opción en un grupo RadioButtons, puede obtener su valor de la propiedad SelectedItem y su ubicación en la colección de la propiedad SelectedIndex. Un botón de radio se puede desactivar si un usuario selecciona otro botón de radio del mismo grupo, pero no se puede desactivar si el usuario lo vuelve a seleccionar. Sin embargo, para desactivar un grupo de botones de radio mediante programación, puede establecer en SelectedItem = null o SelectedIndex = -1. (Si se establece SelectedIndex en cualquier valor fuera del intervalo de la colección Items, no se produce ninguna selección).

Contenido de RadioButtons

En el ejemplo anterior, rellenó el control RadioButtons con cadenas simples. El control proporcionó los botones de radio y usó las cadenas como etiqueta para cada uno de estos.

Sin embargo, puede rellenar el control RadioButtons con cualquier objeto. Normalmente, el objetivo es que el objeto proporcione una representación de cadena que se pueda usar como etiqueta de texto. En algunos casos, puede resultar adecuada una imagen en lugar de texto.

Aquí, se utilizan elementos SymbolIcon para rellenar el control.

<RadioButtons Header="Select an icon option:">
    <SymbolIcon Symbol="Back"/>
    <SymbolIcon Symbol="Attach"/>
    <SymbolIcon Symbol="HangUp"/>
    <SymbolIcon Symbol="FullScreen"/>
</RadioButtons>

También puede usar controles RadioButton individuales para rellenar los elementos RadioButtons. Este es un caso especial que se tratará más adelante. Consulte Controles RadioButton de un grupo RadioButtons.

Una ventaja de poder usar cualquier objeto es que puede enlazar el control RadioButtons a un tipo personalizado del modelo de datos. Esto se demuestra en la siguiente sección.

Enlace de datos

El control RadioButtons admite el enlace de datos a su propiedad ItemsSource. En este ejemplo se muestra cómo puede enlazar el control a un origen de datos personalizado. La apariencia y la funcionalidad de este ejemplo son las mismas que en el ejemplo de color de fondo anterior, pero en este caso los pinceles de color se almacenan en el modelo de datos en lugar de crearse en el controlador de eventos SelectionChanged.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged"
              ItemsSource="{x:Bind colorOptionItems}"/>

public sealed partial class MainPage : Page
{
    // Custom data item.
    public class ColorOptionDataModel
    {
        public string Label { get; set; }
        public SolidColorBrush ColorBrush { get; set; }

        public override string ToString()
        {
            return Label;
        }
    }

    List<ColorOptionDataModel> colorOptionItems;

    public MainPage1()
    {
        this.InitializeComponent();

        colorOptionItems = new List<ColorOptionDataModel>();
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
    }

    private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var option = e.AddedItems[0] as ColorOptionDataModel;
        ExampleBorder.Background = option?.ColorBrush;
    }
}

Controles RadioButton de un grupo RadioButtons

Puede usar controles RadioButton individuales para rellenar los elementos RadioButtons. Puede hacerlo para obtener acceso a determinadas propiedades, como AutomationProperties.Name; o bien, puede que ya tenga código RadioButton, pero quiera utilizar el diseño y la navegación de RadioButtons.

<RadioButtons Header="Background color">
    <RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
    <RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
    <RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>

Cuando usa los controles RadioButton de un grupo RadioButtons, el control RadioButtons sabe cómo presentar el elemento RadioButton, para no terminar con dos círculos de selección.

Sin embargo, existen algunos comportamientos que debe tener en cuenta. Se recomienda controlar el estado y los eventos en los controles individuales o en RadioButtons, pero no en ambos, para evitar conflictos.

En esta tabla se muestran los eventos y las propiedades relacionados en ambos controles.

RadioButton	RadioButtons
Checked, Unchecked, Click	SelectionChanged
IsChecked	SelectedItem, SelectedIndex

Si controla eventos en un RadioButtonindividual, como Checked o Unchecked, y también controla el evento RadioButtons.SelectionChanged, se activarán ambos eventos. El evento RadioButton se produce primero y, a continuación, se produce el evento RadioButtons.SelectionChanged, lo que podría dar lugar a conflictos.

Las propiedades IsChecked, SelectedItem y SelectedIndex permanecen sincronizadas. Un cambio en una propiedad actualiza las otras dos.

La propiedad RadioButton.GroupName se ignora. El control RadioButtons crea el grupo.

Definición de varias columnas

De forma predeterminada, el control RadioButtons organiza verticalmente sus botones de radio en una sola columna. Puede establecer la propiedad MaxColumns para que el control organice los botones de radio en varias columnas. (Al hacer esto, se colocan en orden de columna principal, donde los elementos se rellenan de arriba a abajo y de izquierda a derecha).

<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
    <x:String>Item 6</x:String>
</RadioButtons>

Sugerencia

Para que los elementos se organicen en una sola fila horizontal, establezca un valor de MaxColumns igual al número de elementos del grupo.

Creación de su propio grupo RadioButton

Importante

Se recomienda usar el control RadioButtons para agrupar elementos RadioButton.

Los botones de radio funcionan en grupos. Puede agrupar controles RadioButton individuales de una de estas dos maneras:

• Colocarlos dentro del mismo contenedor principal.
• Establece la propiedad GroupName de cada botón de radio en el mismo valor.

En este ejemplo, el primer grupo de botones de radio se agrupará implícitamente al estar en el mismo panel de pila. El segundo grupo se divide entre dos paneles de pila, por lo que GroupName se usa para agruparlos explícitamente en un solo grupo.

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 1 - implicit grouping -->
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
                         IsChecked="True"/>
        </StackPanel>
    </StackPanel>

    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 2 - grouped by GroupName -->
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked" IsChecked="True"/>
                <RadioButton Content="White" Tag="white"  GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="ExampleBorder"
            BorderBrush="#FFFFD700" Background="#FFFFFFFF"
            BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>

private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
                break;
            case "green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "white":
                ExampleBorder.Background = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "green":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "white":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

Estos dos grupos de controles RadioButton tienen el siguiente aspecto:

Estados del botón de radio

Un botón de radio tiene dos estados: seleccionado o desactivado. Cuando se selecciona un botón de radio, su propiedad IsChecked es true. Cuando se desactiva un botón de radio, su propiedad IsChecked es false. Un botón de radio se puede desactivar si un usuario selecciona otro botón de radio del mismo grupo, pero no se puede desactivar si el usuario lo vuelve a seleccionar. Sin embargo, para desactivar un botón de radio mediante programación puede establecer su propiedad IsChecked en false.

Elementos visuales que se deben considerar

El espaciado predeterminado de los controles RadioButton individuales es diferente del espaciado proporcionado por un grupo RadioButtons. Para aplicar el espaciado RadioButtons a controles RadioButton individuales, use un valor de Margin de 0,0,7,3, como se muestra aquí.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Margin" Value="0,0,7,3"/>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Background"/>
    <RadioButton Content="Item 1"/>
    <RadioButton Content="Item 2"/>
    <RadioButton Content="Item 3"/>
</StackPanel>

Las siguientes imágenes muestran el espaciado preferido de los botones de radio de un grupo.

Nota:

Si usa un control RadioButtons de WinUI, tanto el espaciado como los márgenes y la orientación ya están optimizados.

Obtener el código de ejemplo

• Galería WinUI: En este ejemplo se muestran todos los controles XAML en un formato interactivo.

Temas relacionados

• Botones
• Modificadores para alternar
• Casillas
• Listas y cuadros combinados
• Controles deslizantes
• Clase RadioButtons
• Clase RadioButton