Variations on Material Design checkboxes.

Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/checkbox/style.css');

Usage

Start with a input element and add the checkbox class name:

<input type="checkbox" />

The checkbox class name is implicit when using the type=checkbox attribute.

Variants

Default

<input type="checkbox" />

Checked

<input type="checkbox" checked />

It is recommended to use the checked attribute to set the checkbox to checked but it is also possible to the checked class name.

<input type="checkbox" class="checked" />

Indeterminate

<input class="indeterminate" type="checkbox" />

To manually set the checkbox to indeterminate run the following:

const elements = document.querySelectorAll(".indeterminate");
elements.forEach((element) => {
    element.indeterminate = true;
});

Disabled

<input type="checkbox" disabled />

Design Tokens

Resources

• MDN
• ARIA Blueprints
• Material Design