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

Category: CSS & CSS3 , Form | September 22, 2019
Author:bantikyan
Views Total:7,951 views
Official Page:Go to website
Last Update:September 22, 2019
License:MIT

Preview:

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

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:

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”

You Might Be Interested In:


Leave a Reply