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.
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.