47 - Checkbox

One common UI element found in many web applications is a checkbox. While HTML provides a built-in checkbox element, sometimes we need to create custom checkboxes to better suit the design or functionality requirements of our application.

Create a custom checkbox component using HTML, CSS, and JavaScript. The component should have the following features:

• Display a custom checkbox icon.
• Allow toggling between checked and unchecked states when clicked.
• Allow states like hover, focus, intermediate and disabled.
• Allow small, medium, and large size variants.

Take the Carbon Design System's Checkbox as the reference for the style of the checkbox.