Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bantikyan/icheck-material
Pure css material checkboxes and radio buttons.
https://github.com/bantikyan/icheck-material
asp-net bootstrap checkbox checkboxes css icheck icheck-bootstrap material material-design pure-css radio radio-buttons sass
Last synced: 13 days ago
JSON representation
Pure css material checkboxes and radio buttons.
- Host: GitHub
- URL: https://github.com/bantikyan/icheck-material
- Owner: bantikyan
- License: mit
- Created: 2018-05-20T09:41:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-21T20:16:15.000Z (about 5 years ago)
- Last Synced: 2024-10-25T19:45:58.023Z (20 days ago)
- Topics: asp-net, bootstrap, checkbox, checkboxes, css, icheck, icheck-bootstrap, material, material-design, pure-css, radio, radio-buttons, sass
- Language: CSS
- Homepage: https://bantikyan.github.io/icheck-material/
- Size: 35.2 KB
- Stars: 35
- Watchers: 4
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# icheck-material
[](https://www.jsdelivr.com/package/npm/icheck-material)
icheck-material is pure css solution for displaying material style checkboxes and radio buttons. Try [Demo](https://bantikyan.github.io/icheck-material/).
You may also like to try [icheck-bootstrap](https://github.com/bantikyan/icheck-bootstrap).
Love cool tech? Check out [CoolTechUnder.com](https://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](https://github.com//bantikyan/icheck-material/archive/1.0.1.zip)
* Install with [Yarn](https://yarnpkg.com/en/package/icheck-material): yarn add icheck-material
* Install with [npm](https://www.npmjs.com/package/icheck-material): npm install icheck-material
* Install with [Nuget](https://www.nuget.org/packages/icheck-material/): Install-Package icheck-material
* Use CDN [jsDelivr](https://www.jsdelivr.com/package/npm/icheck-material)
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](https://bantikyan.github.io/icheck-material/)
Material Design Colors: As you can see in previous examples, icheck-material-teal class used for styling. [materialpalette.com](https://www.materialpalette.com/colors)
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](https://github.com/bantikyan/icheck-material/blob/master/LICENSE.md). Feel free to use it in personal and commercial projects.