Checkbox
El componente Checkbox nos permite escoger una o varias opciones en una lista de selección.
import React from "react";
import { Checkbox } from "@nimbus-ds/components";
const Example: React.FC = () => <Checkbox name="my-checkbox" label="Label" />;
export default Example;El componente se compone de una caja de selección con sus respectivos estados, y un label para el contenido referente a la acción.
Usamos este componente para seleccionar opciones en formularios de elección múltiple, para opciones de configuración, o en listas y tablas para seleccionar entradas y ejecutar acciones masivas o filtrado de datos.
El componente Checkbox posee 4 estados configurables, pudiendo ser usados de acuerdo con el contexto y la necesidad de uso.
- Unchecked - usado para representar un checkbox sin selección.
- Checked - usado para representar un checkbox seleccionado.
- Indeterminate - usado en conjunto con otros checkbox para indicar que ellos poseen estados distintos.
- Disabled - usado para representar que un checkbox está deshabilitado. Este estado puede ser combinado con los 3 anteriores.
El componente debería estar siempre acompañado de un label que describa claramente la opción representada. Debería iniciar siempre con la primera letra mayúscula, y las frases nunca terminar con punto o coma. Las opciones en una lista deberían ser ordenadas utilizando un criterio lógico específico (alfabético, numérico, temporal, etc.).
Para facilitar la navegación de presonas con algún tipo de limitación visual o cognitiva, este componente posee un tag (Aria Label) para informar cuál es el estado del Checkbox.
- Seleccionar ítems opcionales en listas de datos.
- Seleccionar múltiples datos de una sola vez.
- Seleccionar atributos de un filtro o búsqueda.
- Seleccionar múltiples filas de una tabla.
Radio Button - Puede ser usado para seleccionar opciones en configuraciones o filtros, donde las opciones son mutuamente excluyentes, es decir, sólo se puede seleccionar una opción.
Instalá o componente via terminal.
npm install @nimbus-ds/checkboxAdditional props are passed to the <Checkbox> element. See input docs for a list of props accepted by the <Checkbox> element.