{"_id":"icheck-material","_rev":"2-a914bf09913e3c960a435f60b87b7d7d","name":"icheck-material","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"icheck-material","version":"1.0.0","description":"Pure css material checkboxes and radio buttons.","main":"icheck-material.css","bugs":{"url":"https://github.com/bantikyan/icheck-material/issues"},"homepage":"https://github.com/bantikyan/icheck-material#readme","repository":{"type":"git","url":"git+https://github.com/bantikyan/icheck-material.git"},"author":{"name":"Hovhannes Bantikyan"},"keywords":["checkbox","radio","material","pure","css"],"license":"MIT","gitHead":"50d0a1ab6c1dbcc7937d028b34b5105544ea9f14","_id":"icheck-material@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"9.5.0","_npmUser":{"name":"bantikyan","email":"bantikyan@gmail.com"},"dist":{"integrity":"sha512-NTQNCI1nCEXlGCa7iZHO1XCJsx9eA2KoDk5kKupGBoXd/7d+LA7zfHIdhWlXPsYUiAMxtB3oe+U40+C80UESiQ==","shasum":"754e369da4589331ddf49b400d0b96833a45c850","tarball":"https://registry.npmjs.org/icheck-material/-/icheck-material-1.0.0.tgz","fileCount":11,"unpackedSize":72052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbltDxCRA9TVsSAnZWagAAas4P/j+8vmcY8ZeN9Cq4O5R8\nLgGvstBDl91i4wMZmhndpmQORboL2sJspg//EPYAPaV4sYXNWk9v9QTPqiGq\nsTJ80EWc/BwVZsuLCHqLQYo8WpG2UXZg+BhDWI2DiAhMDV8+6s/3WzUwZ+Lu\ne1/mtBb3CR1F2XpQQb6FJcigJnHVqjmNTqjsB7AWBk8Sqt02PCtkwGQGlJoY\naV96nTL3Ozw0V6qR8fF/wrpFwkFThC2GMg8ScuFNOjLhXNzRhJdlNwz7JzmN\naMrL5xz3fTlCqnr1eCnJy3NTGPdt20+6sNc0sikIcJy+3+y3KD5Z+MYfuhhx\nQJf1hOeiRdjhEGCYGm17wakQETbYg1vkhiNI3akvwixOPWhY7nwZq3bJp/J5\nvPblZ5lb7Vu8MdatVxdokE2LRsBJperDMTdw6IslOyocXkB5fFNntuGdDM5D\n+m4bFCFbVKImpBRWdzDZtrjXc1+5r8wEkRCXx+RL0uvdhfznwZYRENNEv7SG\nO/TWmPLFoySafYKDb+kyP5CWlAB9vORRr2kpxjt/zozwTd4fjlSuZxmOHvzj\neCXXthyjESnkcj0hyKa4iRtMDtu84nKfIU636vz/whhX+YKzTEuxnfVqZZaY\ndcD+cfPMKzY1t7GYOxzCLoOJofWdooBfZ267vfOHKedtHAdzKTrt/G6jAgpM\nGtFR\r\n=pfi3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQKIfDntmHtnOEihYHYR0M1lqh3pGmydv3sxGBjpsyYAiBxi5DKLMiSPV87NyQoSBUU5Aj8in/abHLp3JpbS4Y6kA=="}]},"maintainers":[{"name":"bantikyan","email":"bantikyan@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/icheck-material_1.0.0_1536610545260_0.2285974201837473"},"_hasShrinkwrap":false},"1.0.1":{"name":"icheck-material","version":"1.0.1","description":"Pure css material checkboxes and radio buttons.","main":"icheck-material.css","bugs":{"url":"https://github.com/bantikyan/icheck-material/issues"},"homepage":"https://github.com/bantikyan/icheck-material#readme","repository":{"type":"git","url":"git+https://github.com/bantikyan/icheck-material.git"},"author":{"name":"Hovhannes Bantikyan"},"keywords":["checkbox","radio","material","pure","css"],"license":"MIT","gitHead":"c206fca0b29cf24a3ea4089ea86759f0f80f4d81","_id":"icheck-material@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"9.5.0","_npmUser":{"name":"bantikyan","email":"bantikyan@gmail.com"},"dist":{"integrity":"sha512-uruQ7el8Jq/7mTiW/+TC694g1hsdf7XgjGSbqccuIfMketEqy5OubDnBOUjaRYdNdeVQORnUBzTnVEIdjG7l/A==","shasum":"80c776134e0f92fe1f3d410da3c05e46d65804c0","tarball":"https://registry.npmjs.org/icheck-material/-/icheck-material-1.0.1.tgz","fileCount":11,"unpackedSize":72401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhoFWCRA9TVsSAnZWagAAKjIP/3kwPilUqRjQ4q6G0ci6\nHqfm8l4yQtnTCD3gbmnCFWTHOlHw3bE1cnEqE+4IfvHF/0ulCNyswDJvt02K\n71NT1DEgiNvwLxyzzYo/2XNKe5n+IsPLdinCsQmU5vTDdU1usqSRPTYGjnxQ\nNyfwfXiuSYpG2w6i3MxxynXB21pEHkEvWG4IhQsz30M+dLdZ4Zbgew8L3fZe\nEtb7UpJnIHbtiikmc59eUILmR7/Ce5vQXe4T3qFEZIOyaFnIgM2MV09kZz8Q\nfVp2pL+aa2wgZlW+2DnHdj6PEGLNeqWbn2qSF4YHTqFY02wAn1h1ZgVbKjuj\nz/W7qNj9l271QF/MkRyHu47guC/i6QTFiD+x7TszIw0KCVgVqWOUKzwTsdX2\nWW4uxR51iwl/6hUzM7wrmql+MEMWBhLfv/870QAxkeHOF2W82QHA87tyM3uh\nT5d4NFxCD3mUJbZc606YPdtLWERad44NcVy6x0DADIJ3apBaHN04gH1RCtfy\nxmi8lcvzIosztcXfp+qPyLY9eCwOYlmw/+7pzS1LXdwNctGOW0qKKtKOBQ9X\nlmVzU6LQjSLDAcS0U93F29vjlmnEHLnSssXNTK5jOJbXW/DXlKv6RmOX19CJ\nnCX9ynTsJLsv/OWowuw+rQSMgcL99s/XaM8MfRlKM+MRhnUTjcyb/9Fczv8x\njivH\r\n=XGT+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSthdvFgz9GrDlEzJLTCTzoGMPu9Opm4jmJYylb2LBEAIhANp8NGaRPTa7Q3XUryXnKyA7mZG3WJ6ci/aTjm4Rs53M"}]},"maintainers":[{"name":"bantikyan","email":"bantikyan@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/icheck-material_1.0.1_1569096021656_0.7744787039123759"},"_hasShrinkwrap":false}},"time":{"created":"2018-09-10T20:15:45.258Z","1.0.0":"2018-09-10T20:15:45.399Z","modified":"2022-05-05T14:46:47.185Z","1.0.1":"2019-09-21T20:00:21.875Z"},"maintainers":[{"name":"bantikyan","email":"bantikyan@gmail.com"}],"description":"Pure css material checkboxes and radio buttons.","homepage":"https://github.com/bantikyan/icheck-material#readme","keywords":["checkbox","radio","material","pure","css"],"repository":{"type":"git","url":"git+https://github.com/bantikyan/icheck-material.git"},"author":{"name":"Hovhannes Bantikyan"},"bugs":{"url":"https://github.com/bantikyan/icheck-material/issues"},"license":"MIT","readme":"# icheck-material\r\n\r\n<a href=\"https://yarnpkg.com/en/package/icheck-material\" target=\"_blank\"><img src=\"https://img.shields.io/badge/yarn-v1.0.1-blue.svg\" alt=\"yarn version\"></a>\r\n<a href=\"https://www.npmjs.com/package/icheck-material\" target=\"_blank\"><img src=\"https://img.shields.io/badge/npm-v1.0.1-blue.svg\" alt=\"npm version\"></a>\r\n<a href=\"https://www.nuget.org/packages/icheck-material\" target=\"_blank\"><img src=\"https://img.shields.io/badge/nuget-v1.0.1-blue.svg\" alt=\"nuget version\"></a>\r\n[![](https://data.jsdelivr.com/v1/package/npm/icheck-material/badge)](https://www.jsdelivr.com/package/npm/icheck-material)\r\n\r\nicheck-material is pure css solution for displaying material style checkboxes and radio buttons. Try [Demo](https://bantikyan.github.io/icheck-material/).\r\n\r\nYou may also like to try [icheck-bootstrap](https://github.com/bantikyan/icheck-bootstrap).  \r\nLove cool tech? Check out [CoolTechUnder.com](https://cooltechunder.com/)\r\n\r\n## Table of contents\r\n\r\n* <a href=\"#user-content-getting-started\">Getting started</a>\r\n* <a href=\"#user-content-html-syntax\">HTML syntax</a>\r\n* <a href=\"#user-content-aspnet-mvc-syntax\">ASP.NET MVC syntax</a>\r\n* <a href=\"#user-content-color-schemes\">Color palette</a>\r\n* <a href=\"#user-content-license\">License</a>\r\n\r\n## Getting started\r\n\r\nSeveral quick start options are available:\r\n\r\n* [Download the latest release](https://github.com//bantikyan/icheck-material/archive/1.0.1.zip)\r\n* Install with [Yarn](https://yarnpkg.com/en/package/icheck-material): <code>yarn add icheck-material</code>\r\n* Install with [npm](https://www.npmjs.com/package/icheck-material): <code>npm install icheck-material</code>\r\n* Install with [Nuget](https://www.nuget.org/packages/icheck-material/): <code>Install-Package icheck-material</code>\r\n* Use CDN [jsDelivr](https://www.jsdelivr.com/package/npm/icheck-material)\r\n\r\nThen link <code>icheck-material.css</code> file inside <code>head</code> tag of your page.\r\n\r\n## HTML syntax\r\n\r\n#### checkbox example\r\n\r\n```\r\n<div class=\"icheck-material-teal\">\r\n    <input type=\"checkbox\" id=\"someCheckboxId\" />\r\n    <label for=\"someCheckboxId\">Click to check</label>\r\n</div>\r\n```\r\n\r\n#### radio buttons example\r\n\r\n```\r\n<div class=\"icheck-material-teal\">\r\n    <input type=\"radio\" id=\"someRadioId1\" name=\"someGroupName\" />\r\n    <label for=\"someRadioId1\">Option 1</label>\r\n</div>\r\n<div class=\"icheck-material-teal\">\r\n    <input type=\"radio\" id=\"someRadioId2\" name=\"someGroupName\" />\r\n    <label for=\"someRadioId2\">Option 2</label>\r\n</div>\r\n```\r\n\r\n#### inline styling\r\n\r\nTo have checkboxes or radio buttons inline use .icheck-inline class\r\n\r\n```\r\n<div class=\"icheck-material-teal icheck-inline\">\r\n    <input type=\"checkbox\" id=\"chb1\" />\r\n    <label for=\"chb1\">Label 1</label>\r\n</div>\r\n<div class=\"icheck-material-teal icheck-inline\">\r\n    <input type=\"checkbox\" id=\"chb2\" />\r\n    <label for=\"chb2\">Label 2</label>\r\n</div>\r\n```\r\n\r\n#### disabled\r\n\r\nUse disabled attribute on your input (checkbox or radio) to have disabled style.\r\n\r\n#### no label\r\n\r\nTo have components without label, you still have to have label control with empty text.\r\n\r\n```\r\n<div class=\"icheck-material-teal\">\r\n    <input type=\"checkbox\" id=\"someCheckboxId\" />\r\n    <label for=\"someCheckboxId\"></label>\r\n</div>\r\n```\r\n\r\n## ASP.NET MVC syntax\r\n\r\n#### checkbox example\r\n\r\n```\r\n<div class=\"icheck-material-teal\">\r\n    @Html.CheckBoxFor(m => m.SomeProperty, new { id = \"someCheckboxId\" })\r\n    <label for=\"someCheckboxId\">Click to check</label>\r\n</div>\r\n```\r\n\r\n#### radio buttons example\r\n\r\n```\r\n<div class=\"icheck-material-teal\">\r\n    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = \"someRadioId1\" }) \r\n    <label for=\"someRadioId1\">Option 1</label>\r\n</div>\r\n<div class=\"icheck-material-teal\">\r\n    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = \"someRadioId2\" })\r\n    <label for=\"someRadioId2\">Option 2</label>\r\n</div>\r\n```\r\n\r\n## Color palette\r\n\r\nTry [Demo](https://bantikyan.github.io/icheck-material/)\r\n\r\n<b>Material Design Colors:</b> As you can see in previous examples, icheck-material-teal class used for styling. [materialpalette.com](https://www.materialpalette.com/colors)\r\nYou can use following classes for material colors:\r\n\r\n<code>.icheck-material-red</code><br/>\r\n<code>.icheck-material-pink</code><br/>\r\n<code>.icheck-material-purple</code><br/>\r\n<code>.icheck-material-deeppurple</code><br/>\r\n<code>.icheck-material-indigo</code><br/>\r\n<code>.icheck-material-blue</code><br/>\r\n<code>.icheck-material-lightblue</code><br/>\r\n<code>.icheck-material-cyan</code><br/>\r\n<code>.icheck-material-teal</code><br/>\r\n<code>.icheck-material-green</code><br/>\r\n<code>.icheck-material-lightgreen</code><br/>\r\n<code>.icheck-material-lime</code><br/>\r\n<code>.icheck-material-yellow</code><br/>\r\n<code>.icheck-material-amber</code><br/>\r\n<code>.icheck-material-orange</code><br/>\r\n<code>.icheck-material-deeporange</code><br/>\r\n<code>.icheck-material-brown</code><br/>\r\n<code>.icheck-material-grey</code><br/>\r\n<code>.icheck-material-bluegrey</code><br/>\r\n\r\nYou can also have your custom color formatting by using <code>icheck-material-custom.scss</code> sass file.\r\n\r\n\r\n## License\r\n\r\nicheck-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.\r\n","readmeFilename":"README.md"}