icheck-material


icheck-material is pure css solution for displaying material style checkboxes and radio buttons. Try Demo.

You may also like to try icheck-bootstrap.
Love cool tech? Check out CoolTechUnder.com

Table of contents

* Getting started
* HTML syntax
* ASP.NET MVC syntax
* Color palette
* License

Getting started

Several quick start options are available:

* Download the latest release
* Install with Yarn: yarn add icheck-material
* Install with npm: npm install icheck-material
* Install with Nuget: Install-Package icheck-material
* Use CDN jsDelivr

Then link icheck-material.css file inside head tag of your page.

HTML syntax

#### checkbox example

``

Click to check

`

#### radio buttons example

`

Option 1

Option 2

`

#### inline styling

To have checkboxes or radio buttons inline use .icheck-inline class

`

Label 1

Label 2

`

#### disabled

Use disabled attribute on your input (checkbox or radio) to have disabled style.

#### no label

To have components without label, you still have to have label control with empty text.

`

`

ASP.NET MVC syntax

#### checkbox example

`

@Html.CheckBoxFor(m => m.SomeProperty, new { id = "someCheckboxId" })
Click to check

`

#### radio buttons example

`

@Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = "someRadioId1" })
Option 1

@Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = "someRadioId2" })
Option 2

``

Color palette

Try Demo

Material Design Colors: As you can see in previous examples, icheck-material-teal class used for styling. materialpalette.com
You can use following classes for material colors:

.icheck-material-red

.icheck-material-pink

.icheck-material-purple

.icheck-material-deeppurple

.icheck-material-indigo

.icheck-material-blue

.icheck-material-lightblue

.icheck-material-cyan

.icheck-material-teal

.icheck-material-green

.icheck-material-lightgreen

.icheck-material-lime

.icheck-material-yellow

.icheck-material-amber

.icheck-material-orange

.icheck-material-deeporange

.icheck-material-brown

.icheck-material-grey

.icheck-material-bluegrey


You can also have your custom color formatting by using icheck-material-custom.scss sass file.

License

icheck-material released under the MIT license. Feel free to use it in personal and commercial projects.