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

Category: CSS & CSS3 , Form | September 25, 2018
Author: bantikyan
Views Total: 1,765
Official Page: Go to website
Last Update: September 25, 2018
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>

You Might Be Interested In:


Leave a Reply