Checkbox
Permite seleccionar una o varias opciones de una lista, de forma independiente entre sí.
- Seleccionar ítems de una lista: elegir uno o varios elementos opcionales dentro de una lista de datos.
- Activar filtros en simultáneo: habilitar varios atributos de un filtro o una búsqueda al mismo tiempo.
- Seleccionar filas de una tabla: marcar múltiples filas para ejecutar acciones masivas.
- Confirmar una aceptación: registrar el consentimiento a una condición puntual, como aceptar términos y condiciones.
- Elegir una opción excluyente: seleccionar una única opción entre varias mutuamente excluyentes. En su lugar, usar Radio.
- Aplicar un cambio inmediato: activar o desactivar una configuración con efecto inmediato. En su lugar, usar Toggle.
- Disparar una acción: ejecutar algo al instante en lugar de registrar una selección. En su lugar, usar Button.
- Container: caja de selección que refleja el estado y recibe la interacción.
- Icon: marca que aparece dentro del contenedor según el estado: un check cuando está marcado o una línea cuando es indeterminate.
- Label: texto que describe la opción que representa el control.
Primary: apariencia por defecto.
Danger: señala un error de validación en la selección. Ej.: un checkbox obligatorio que quedó sin marcar al enviar el formulario.
aiGenerated: aplica un borde con degradé de IA para indicar que el valor fue sugerido por inteligencia artificial. Ej.: una opción precompletada por una sugerencia automática.
Suele aparecer en formularios, listas de opciones, paneles de configuración y filtros, junto a la etiqueta que describe la opción para que quede claro qué se está activando o desactivando.
Usar checkbox cuando las opciones no son excluyentes y se puede elegir más de una.
No usar checkbox para opciones mutuamente excluyentes; en ese caso usar Radio.
Redactar el label en positivo, describiendo lo que se activa al marcar el checkbox.
Evitar labels en negativo: al marcarlos generan una doble negación difícil de interpretar.
Reservar el estado indeterminate para un checkbox que resume una selección parcial de su grupo.
No usar indeterminate en un checkbox suelto: solo tiene sentido cuando resume la selección parcial de un grupo.
- Label asociado: acompañar siempre el control con un label que describa la opción, para que lectores de pantalla anuncien de qué se trata.
- Navegación por teclado: el checkbox es alcanzable con Tab y se marca o desmarca con la barra espaciadora.
- Foco visible: el control muestra un anillo de foco al navegar con teclado, sin depender del puntero.
- No depender solo del color: la apariencia danger se acompaña de un texto de error o ayuda, ya que el color por sí solo no comunica el problema.
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Checkbox } from "@nimbus-ds/components";
const Example: React.FC = () => <Checkbox name="my-checkbox" label="Label" />;
export default Example;Las propiedades adicionales se pasan al elemento <Checkbox>. Consultá la documentación del elemento input para ver la lista de atributos aceptados.
Checkbox
| Name | Type | Default | Description |
|---|---|---|---|
name* | string | The name of the input element. | |
appearance | 'danger' | '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 | 'false' | 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. | |
aiGenerated | boolean | 'false' | Highlights the checkbox to indicate its value was generated by AI. Applies AI gradient border that persists regardless of checked state. |
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. | |
className | string | ||
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.