Radio

2.3.0

El componente Radio nos permite seleccionar una única opción dentro de una lista de selección.

import React from "react";
import { Radio } from "@nimbus-ds/components";

const Example: React.FC = () => <Radio name="my-radio" label="Label" />;

export default Example;

Anatomía del componente

Se compone de un bullet o botón de selección con sus respectivos estados, además de un label que exhibe el contenido referente a la acción.

Guidelines

Usamos este componente cuando necesitamos que el usuario ingrese información en un formulario, marcando una única opción dentro de una lista de hasta 7 ítems.

Radio default

Esta variante posee menos destaque visual, por eso pued eser usada en listas de selección verticales, como configuraciones o formularios de registro.

Radio button

Esta variante posee más destaque visual, por eso puede ser utilizada en listas horizontales como criterios dentro de un filtro de datos.

Estados posibles

El componente posee 3 estados, pudiendo ser usados de acuerdo con el contexto y la necesidad de uso.

Rest - es usado para representar una opción sin seleccionar
Checked - es usado para representar una acción seleccionada
Disabled - es usado para representar que una opción está deshabilitada. Est estado puede ser combinado con los 2 anteriores

Labels

El componente debe estar siempre acompañado de un label que describa claramente la opción representada. Deberá comenzar siempre con la primera letra mayúscula, y nunca terminar con punto o coma. Las opciones deben ser ordenadas usando un criterio lógico específico (alfabético, numérico, temporal, etc.).

Aria Label

Para facilitar la navegación a personas con algún tipo de limitación visual o cognitiva, este componente posee una tag (Aria Label) para ainformar cuál es el estado actual del Radio.

Recomendaciones de uso

Selección de ítems en listas donde la elección es obligatoria
Seleccionar una única configuración en una lista de opciones

Componentes relacionados

Select - Puede ser usado para seleccionar una única opción en una lista con más de 7 ítems
Toggle - Puede ser usado para seleccionar opciones binarias como encender y apagar
Checkbox - Puede ser usado para seleccionar múltiples opciones en una lista

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/radio

Props

Additional props are passed to the <Radio> element. See input docs for a list of props accepted by the <Radio> element.

Radio

Name	Type	Default	Description
name*	string		Name attribute of the input element.
as	'button' 'radio'	'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.
as	'button' 'radio'	'radio'	Change the visual style of the radio.
data-testid	string		This is an attribute used to identify a DOM node for testing purposes.