Material Design Checkboxes & Radio Buttons In Pure CSS – icheck-material

Preview:

Description:

icheck-material is a CSS/CSS3 library that lets you beautify & animate the regular checkboxes and radio buttons with Material Design styles.

See also:

• Bootstrap Checkbox & Radio Button In Pure CSS

How to use it:

Install the icheck-material package.

# NPM
$ npm install icheck-material --save

Import the icheck-material.

import './icheck-material.min.css';

<link href="icheck-material.css" rel="stylesheet" type="text/css">

Create Material Design styled checkboxes & radio buttons:

<div class="icheck-material-red">
  <input type="checkbox" checked id="red" />
  <label for="red">red</label>
</div>
<div class="icheck-material-red">
  <input type="radio" id="red1" name="red" />
  <label for="red1">red 1</label>
</div>
<div class="icheck-material-red">
  <input type="radio" checked id="red2" name="red" />
  <label for="red2">red 2</label>
</div>

To make the checkboxes & radio buttons inline, just add the class ‘icheck-inline’ to the parent container.

<div class="icheck-material-red icheck-inline">
  <input type="checkbox" checked id="red" />
  <label for="red">red</label>
</div>
<div class="icheck-material-red icheck-inline">
  <input type="radio" id="red1" name="red" />
  <label for="red1">red 1</label>
</div>
<div class="icheck-material-red icheck-inline">
  <input type="radio" checked id="red2" name="red" />
  <label for="red2">red 2</label>
</div>

Changelog:

v1.0.1 (09/22/2019)

• Fixed Issue: Checkbox is not checked when click on the “background area”