//Checkbox
Molecules

Checkbox

Permite selección múltiple independiente de una lista. Soporta tres valores (unchecked, checked, indeterminate) y los estados enabled y disabled.

Extraído14 variantes — Figma: ⏺ Checkbox (node 40000991:9393)

Preview

Unchecked — estado inicial
Checked — seleccionado
Indeterminate — selección parcial de hijos
Disabled unchecked
Disabled checked
Error — validación fallida

Estados

Unchecked

Borde gris (#c8c8c8), fondo blanco

Checked

Borde + fondo brand-primary, ícono check blanco

Indeterminate

Mismo que checked, ícono línea horizontal

Disabled

Opacidad 40% en todo el elemento, no interactuable

Error

Borde rojo semantic.feedback.error

Reglas de uso

✓ Do

Usa para selección múltiple e independiente de una lista

Usa indeterminate cuando un grupo tiene selección parcial

Agrupa con fieldset + legend

Siempre incluye etiqueta de texto legible

✗ Don't

No uses para selección única — usa Radio Button

No uses para acciones inmediatas — usa Switch

No pongas más de 8 opciones sin paginación

No uses solo checkbox sin label visible

Accesibilidad

role="checkbox"

Nativo en <input type="checkbox"> — no agregar si usas HTML semántico

aria-checked="mixed"

Para estado indeterminate en checkboxes custom

aria-disabled="true"

Cuando está deshabilitado

aria-describedby

ID del mensaje de error cuando hay validación fallida

Props API

interface CheckboxProps {
  checked?: boolean           // Seleccionado
  indeterminate?: boolean     // Selección parcial
  disabled?: boolean          // No interactuable
  error?: boolean             // Validación fallida
  label: string               // Texto visible (requerido)
  onChange?: (checked: boolean) => void
  'aria-describedby'?: string // ID del error message
}

<input
  type="checkbox"
  aria-checked={indeterminate ? 'mixed' : checked}
  aria-disabled={disabled}
  aria-describedby={error ? 'error-id' : undefined}
/>