[SalesForce] Error when adding different Lightning Web Components to the Playground

Firstly, if you are absolutely sure that you cannot get the needed functionality using standard Javascript and SLDS classes, only then you should go for Using Third-Party JavaScript Libraries.

Option 1: You should use import statements in every component that need to use this library.

Option 2: You use import these libraries in base class and extend that class in every component that needs these libraries.

import MyBase from 'c/myBase';

export default class MyComp extends MyBase {
    ...
}

From the specification of lightning-input, it looks like there is no native onclick event.

Its recommended that you should be using onchange instead.

HTML:

<template>
    <lightning-input type="checkbox" label="Lightning Checkbox"  onchange={handleBulletPointsInput2}>
        </lightning-input>

        <input type="checkbox" onclick={handleBulletPointsInput2}>HTML Checkbox</input>
</template>

Js:

import { LightningElement } from 'lwc';

export default class InputCheckboxBasic extends LightningElement {
    handleBulletPointsInput2(){
        console.log('--handleBulletPointsInput21--');
    }
}

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/lsOssohh3/5/edit

Reason why its firing two events onclick:

In normal html-checkbox, the check uncheck only work when you click on the checkbox.

In lightning-input the check-uncheck work even on click of Label. Both checkbox and label react to click as they both are children of div/span that handles the onclick event and propagates it down to all reactive children