Radio
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;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.
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.
Esta variante posee menos destaque visual, por eso pued eser usada en listas de selección verticales, como configuraciones o formularios de registro.
Esta variante posee más destaque visual, por eso puede ser utilizada en listas horizontales como criterios dentro de un filtro de datos.
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
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.).
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.
- Selección de ítems en listas donde la elección es obligatoria
- Seleccionar una única configuración en una lista de opciones
- 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
Instalá el componente via terminal.
npm install @nimbus-ds/radioAdditional props are passed to the <Radio> element. See input docs for a list of props accepted by the <Radio> element.