Checkbox

2.3.0

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;

Anatomía del componente

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.

Guidelines

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.

Estados posibles

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.

Labels

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

Aria Label

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.

El Checkbox es recomendado para:

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.

Componentes relacionados

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.

Implementación

Instalá o componente via terminal.

npm install @nimbus-ds/checkbox

Props

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

Checkbox

Name	Type	Default	Description
name*	string		The name of the input element.
appearance	'danger' 'primary'	'neutral'	Change the visual style of the checkbox.
checked	boolean		Modifies true/false value of the native checkbox.
disabled	boolean		Modifies the native disabled state of the native checkbox.
indeterminate	boolean		If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.
label	string		Text to be rendered inside the component.

Checkbox.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.
data-testid	string		This is an attribute used to identify a DOM node for testing purposes.