Radio
Seleccionar una única opción dentro de una lista de opciones mutuamente excluyentes.
- Seleccionar una única opción en listas pequeñas: cuando se requiere elegir exactamente una alternativa entre un conjunto donde solo una puede estar activa. Ej.: método de pago, tipo de envío, frecuencia de suscripción.
- Mostrar hasta 7 opciones predefinidas: presentar opciones en un formulario o panel de configuración donde el espacio es limitado.
- Ofrecer escenarios alternativos: diferir entre configuraciones o modos mutuamente excluyentes. Ej.: calidad de descarga, ubicación de almacenamiento, frecuencia de notificaciones.
- Seleccionar múltiples opciones: cuando el usuario requiere elegir uno o más ítems de una lista. En su lugar, usar Checkbox.
- Activar o desactivar un estado binario: cuando se necesita un efecto inmediato. En su lugar, usar Toggle.
- Seleccionar de una lista larga: cuando hay más de 7 ítems disponibles. En su lugar, usar Select.
- Disparar una acción: cuando el objetivo es ejecutar algo al instante en lugar de registrar una selección. En su lugar, usar Button.
Variante Default
Variante Button
- Container: marcador de selección que refleja el estado y recibe la interacción.
- Indicator: marca que aparece dentro del contenedor cuando la opción está seleccionada.
- Label: texto que describe la opción que representa el control.
Default: apariencia de bullet (punto). Recomendada para listas verticales como configuraciones o formularios de registro.
Button: apariencia de botón. Recomendada para listas horizontales como criterios de filtro o selección de datos, donde se requiere mayor destaque visual.
Utilizar Radio en formularios, listas de selección y paneles de configuración. Siempre acompañar con un label que describa claramente la opción, de modo que sea evidente qué representa cada selección.
Utilizar Radio cuando las opciones son mutuamente excluyentes y solo una puede seleccionarse.
No utilizar Radio para seleccionar múltiples opciones; usar Checkbox en su lugar.
Presentar opciones en orden lógico: alfabético, numérico, temporal o por frecuencia de uso.
No aleatorizar el orden de opciones; dificulta encontrar y comparar alternativas.
Usar la variante Button para grupos cortos (2 a 4 opciones) de estados mutuamente excluyentes con alta visibilidad.
No usar la variante Button con muchas opciones; a partir de cierta cantidad el grupo se angosta o rompe línea y pierde legibilidad.
Ubicar las opciones en una lista vertical: la relación entre cada control y su etiqueta queda inequívoca.
No ubicar las opciones en fila horizontal: resulta ambiguo si la etiqueta corresponde al control anterior o al siguiente.
- Label asociado: siempre emparejar el control con un label que describa la opción, de modo que los lectores de pantalla anuncien correctamente qué es.
- Navegación por teclado: el radio es alcanzable con Tab y seleccionable con la barra espaciadora o las teclas de dirección cuando está enfocado.
- Foco visible: el control muestra un anillo de foco al navegar con teclado, sin depender del puntero.
- Radios agrupados: utilizar el mismo atributo name para todos los radios en un grupo, de modo que solo uno pueda estar seleccionado a la vez.
El label no solo nombra la opción, sino que describe qué pasa al elegirla. El group label dice sobre qué se elige.
- Capitalización: sentence case en group label, label de opción y help text.
- Puntuación: sin punto final en group label y label de opción. Con punto final en help text y mensaje de error.
- Longitud: group label, 1 a 3 palabras; hasta 6 si es una pregunta directa. Label de opción, preferentemente 1 a 3 palabras. Help text y error, 1 oración.
- Label de opción, describir el resultado: nombra qué pasa si se elige esa opción, no solo la categoría. "Envío express", no "Express". "Solo yo puedo verlo", no "Privado".
- Preselección: preseleccionar la opción más probable o de menor riesgo cuando aplique. Nunca preseleccionar opciones de alto riesgo (pago, privacidad, seguridad).
- Opción "Otro": agregarla cuando la lista no puede cubrir todos los casos posibles.
- Opción "Ninguno": agregarla cuando la persona debería poder dejar el campo sin selección.
| Caso | Qué hacer |
|---|---|
Label de opción que solo nombra la categoría ("Express", "Privado") | Reescribir para describir el resultado: "Envío express", "Solo yo puedo verlo". |
Group label genérico ("Opciones", "Configuración") | Reemplazar por la categoría real o por una pregunta directa: "Medio de envío", "¿Quién puede ver este producto?". |
Lista no exhaustiva sin opción "Otro" | Agregar "Otro". |
Label de opción sin texto visible | Usar aria-label con el mismo criterio: nombra el resultado de la elección. |
Opción deshabilitada por plan o permisos | Agregar el contexto en el help text del grupo, no en el label de la opción. |
Instalá el componente via terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Radio } from "@nimbus-ds/components";
const Example: React.FC = () => <Radio name="my-radio" label="Label" />;
export default Example;Las propiedades adicionales se pasan al elemento <Radio>. Consultá la documentación del elemento input para ver la lista de atributos aceptados.
Radio
| Name | Type | Default | Description |
|---|---|---|---|
name* | string | Name attribute of the input element. | |
as | 'button' | 'radio' | Change the visual style of the radio. |
checked | boolean | Modifies true/false value of the native radio. | |
disabled | boolean | Modifies the native disabled state of the native radio. | |
label | string | Text to be rendered inside the component. |
Radio.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
as | 'button' | 'radio' | Change the visual style of the radio. |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.