icheck-material

1.0.1 • Public • Published

icheck-material

yarn version npm version nuget version

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

Several quick start options are available:

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

HTML syntax

checkbox example

<div class="icheck-material-teal">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

radio buttons example

<div class="icheck-material-teal">
    <input type="radio" id="someRadioId1" name="someGroupName" />
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-material-teal">
    <input type="radio" id="someRadioId2" name="someGroupName" />
    <label for="someRadioId2">Option 2</label>
</div>

inline styling

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

<div class="icheck-material-teal icheck-inline">
    <input type="checkbox" id="chb1" />
    <label for="chb1">Label 1</label>
</div>
<div class="icheck-material-teal icheck-inline">
    <input type="checkbox" id="chb2" />
    <label for="chb2">Label 2</label>
</div>

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.

<div class="icheck-material-teal">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId"></label>
</div>

ASP.NET MVC syntax

checkbox example

<div class="icheck-material-teal">
    @Html.CheckBoxFor(m => m.SomeProperty, new { id = "someCheckboxId" })
    <label for="someCheckboxId">Click to check</label>
</div>

radio buttons example

<div class="icheck-material-teal">
    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = "someRadioId1" }) 
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-material-teal">
    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = "someRadioId2" })
    <label for="someRadioId2">Option 2</label>
</div>

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.

Package Sidebar

Install

npm i icheck-material

Weekly Downloads

27

Version

1.0.1

License

MIT

Unpacked Size

72.4 kB

Total Files

11

Last publish

Collaborators

  • bantikyan