#47 Checkbox

medium
css
design-system
html

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.