Checkbox.

<label class="ui-sample ui-choice" for="checkbox-0"><input id="checkbox-0" type="checkbox"><span>Incluir series descontinuadas</span></label>

<label class="ui-sample ui-choice border border-slate-300 bg-white p-4 text-slate-950" for="checkbox-0"><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="checkbox-0" type="checkbox"><span>Incluir series descontinuadas</span></label>

import type { ChangeEventHandler } from "react";

export interface CheckboxProps {
  /** Texto de la opción, a la derecha de la casilla. */
  label?: string;
  /** Id de la casilla. Usa uno distinto por casilla en la página. */
  id?: string;
  name?: string;
  /** Valor enviado con el formulario cuando está marcada. */
  value?: string;
  /** Estado inicial de una casilla no controlada. */
  defaultChecked?: boolean;
  /** Estado de una casilla controlada; va junto con `onChange`. */
  checked?: boolean;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  disabled?: boolean;
  className?: string;
}

/**
 * Casilla de verificación con texto, para activar o desactivar una opción independiente.
 *
 * @example <Checkbox id="descontinuadas" label="Incluir series descontinuadas" defaultChecked />
 * @example <Checkbox id="descontinuadas" checked={incluir} onChange={alternar} />
 */
export function Checkbox({
  label = "Incluir series descontinuadas",
  id = "checkbox-0",
  name,
  value,
  defaultChecked = false,
  checked,
  onChange,
  disabled,
  className,
}: CheckboxProps) {
  const controlado = checked !== undefined && onChange !== undefined;
  return (
    <label className={["ui-choice", className].filter(Boolean).join(" ")} htmlFor={id}>
      <input
        id={id}
        name={name}
        type="checkbox"
        value={value}
        disabled={disabled}
        onChange={onChange}
        {...(controlado ? { checked } : { defaultChecked: checked ?? defaultChecked })}
      />
      <span>{label}</span>
    </label>
  );
}