Moodinary/UI

Checkbox

Opciones independientes o confirmar algo. Para on/off inmediato, Switch.

Casilla nativa de 16 px usada en Incluir historia, filtros de equipos y conectores. label arma el control y su texto en una fila clickeable. El borde vacío coincide con el dashboard, no con el token genérico de hover.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/checkbox.json
import
import { Checkbox } from "@moodinary/ui/components/checkbox";

Ejemplos

Marcado, vacío, parcial, deshabilitado y error

El estado parcial usa la propiedad DOM indeterminate. No es un tercer valor que se envía con el formulario.

Código
default.tsx
"use client";

import { Checkbox } from "@moodinary/ui/components/checkbox";

export default function CheckboxDefault() {
	return (
		<div className="flex flex-col gap-2.5">
			<Checkbox defaultChecked label="Incluir historia" />
			<Checkbox label="4.º A" />
			<Checkbox label="Operaciones" />
			<Checkbox
				label="Selección parcial"
				ref={(el) => {
					if (el) {
						el.indeterminate = true;
					}
				}}
			/>
			<Checkbox disabled label="Sincronizar calendario" />
			<Checkbox aria-invalid label="Opción con error (demostración)" />
		</div>
	);
}

Props

Checkbox

PropTipoDefaultDescripción
labelReact.ReactNode-Texto que envuelve el input en un label.
checked / defaultCheckedboolean-Estado controlado o inicial.
onChangeReact.ChangeEventHandler<HTMLInputElement>-El nuevo estado está en event.target.checked.
refReact.Ref<HTMLInputElement>-Permite asignar indeterminate al elemento nativo.
disabledbooleanfalseBloquea el control y apaga el texto.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"-Marca el borde de la casilla con el color de error.
name / valuestring / string | number | readonly string[]-Identifica el dato enviado cuando la casilla está marcada.

Cuándo sí y cuándo no

Hacé
  • Usá una frase que se entienda marcada o vacía.
  • Reservá indeterminate para selecciones parciales de un grupo.
  • Poné cada opción independiente en su propia casilla.
Evitá
  • No uses Checkbox para opciones excluyentes.
  • No uses el estado parcial para un valor desconocido.
  • No uses Switch si la selección recién aplica al guardar.

Accesibilidad

  • Espacio cambia la selección; Tab pasa al siguiente control.
  • label amplía el área clickeable y da un nombre accesible.
  • El navegador expone indeterminate como estado mixto.