{"id":15731868,"url":"https://github.com/bantikyan/icheck-material","last_synced_at":"2025-07-20T17:33:21.089Z","repository":{"id":57270836,"uuid":"134137848","full_name":"bantikyan/icheck-material","owner":"bantikyan","description":"Pure css material checkboxes and radio buttons.","archived":false,"fork":false,"pushed_at":"2019-09-21T20:16:15.000Z","size":36,"stargazers_count":35,"open_issues_count":3,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-10T22:49:15.895Z","etag":null,"topics":["asp-net","bootstrap","checkbox","checkboxes","css","icheck","icheck-bootstrap","material","material-design","pure-css","radio","radio-buttons","sass"],"latest_commit_sha":null,"homepage":"https://bantikyan.github.io/icheck-material/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bantikyan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-20T09:41:51.000Z","updated_at":"2024-10-08T18:31:18.000Z","dependencies_parsed_at":"2022-08-31T00:01:45.238Z","dependency_job_id":null,"html_url":"https://github.com/bantikyan/icheck-material","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/bantikyan/icheck-material","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bantikyan","download_url":"https://codeload.github.com/bantikyan/icheck-material/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bantikyan%2Ficheck-material/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266165794,"owners_count":23886689,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asp-net","bootstrap","checkbox","checkboxes","css","icheck","icheck-bootstrap","material","material-design","pure-css","radio","radio-buttons","sass"],"created_at":"2024-10-04T00:06:35.908Z","updated_at":"2025-07-20T17:33:21.071Z","avatar_url":"https://github.com/bantikyan.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# icheck-material\n\n\u003ca href=\"https://yarnpkg.com/en/package/icheck-material\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/yarn-v1.0.1-blue.svg\" alt=\"yarn version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/icheck-material\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/npm-v1.0.1-blue.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.nuget.org/packages/icheck-material\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/nuget-v1.0.1-blue.svg\" alt=\"nuget version\"\u003e\u003c/a\u003e\n[![](https://data.jsdelivr.com/v1/package/npm/icheck-material/badge)](https://www.jsdelivr.com/package/npm/icheck-material)\n\nicheck-material is pure css solution for displaying material style checkboxes and radio buttons. Try [Demo](https://bantikyan.github.io/icheck-material/).\n\nYou may also like to try [icheck-bootstrap](https://github.com/bantikyan/icheck-bootstrap).  \nLove cool tech? Check out [CoolTechUnder.com](https://cooltechunder.com/)\n\n## Table of contents\n\n* \u003ca href=\"#user-content-getting-started\"\u003eGetting started\u003c/a\u003e\n* \u003ca href=\"#user-content-html-syntax\"\u003eHTML syntax\u003c/a\u003e\n* \u003ca href=\"#user-content-aspnet-mvc-syntax\"\u003eASP.NET MVC syntax\u003c/a\u003e\n* \u003ca href=\"#user-content-color-schemes\"\u003eColor palette\u003c/a\u003e\n* \u003ca href=\"#user-content-license\"\u003eLicense\u003c/a\u003e\n\n## Getting started\n\nSeveral quick start options are available:\n\n* [Download the latest release](https://github.com//bantikyan/icheck-material/archive/1.0.1.zip)\n* Install with [Yarn](https://yarnpkg.com/en/package/icheck-material): \u003ccode\u003eyarn add icheck-material\u003c/code\u003e\n* Install with [npm](https://www.npmjs.com/package/icheck-material): \u003ccode\u003enpm install icheck-material\u003c/code\u003e\n* Install with [Nuget](https://www.nuget.org/packages/icheck-material/): \u003ccode\u003eInstall-Package icheck-material\u003c/code\u003e\n* Use CDN [jsDelivr](https://www.jsdelivr.com/package/npm/icheck-material)\n\nThen link \u003ccode\u003eicheck-material.css\u003c/code\u003e file inside \u003ccode\u003ehead\u003c/code\u003e tag of your page.\n\n## HTML syntax\n\n#### checkbox example\n\n```\n\u003cdiv class=\"icheck-material-teal\"\u003e\n    \u003cinput type=\"checkbox\" id=\"someCheckboxId\" /\u003e\n    \u003clabel for=\"someCheckboxId\"\u003eClick to check\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### radio buttons example\n\n```\n\u003cdiv class=\"icheck-material-teal\"\u003e\n    \u003cinput type=\"radio\" id=\"someRadioId1\" name=\"someGroupName\" /\u003e\n    \u003clabel for=\"someRadioId1\"\u003eOption 1\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"icheck-material-teal\"\u003e\n    \u003cinput type=\"radio\" id=\"someRadioId2\" name=\"someGroupName\" /\u003e\n    \u003clabel for=\"someRadioId2\"\u003eOption 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### inline styling\n\nTo have checkboxes or radio buttons inline use .icheck-inline class\n\n```\n\u003cdiv class=\"icheck-material-teal icheck-inline\"\u003e\n    \u003cinput type=\"checkbox\" id=\"chb1\" /\u003e\n    \u003clabel for=\"chb1\"\u003eLabel 1\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"icheck-material-teal icheck-inline\"\u003e\n    \u003cinput type=\"checkbox\" id=\"chb2\" /\u003e\n    \u003clabel for=\"chb2\"\u003eLabel 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### disabled\n\nUse disabled attribute on your input (checkbox or radio) to have disabled style.\n\n#### no label\n\nTo have components without label, you still have to have label control with empty text.\n\n```\n\u003cdiv class=\"icheck-material-teal\"\u003e\n    \u003cinput type=\"checkbox\" id=\"someCheckboxId\" /\u003e\n    \u003clabel for=\"someCheckboxId\"\u003e\u003c/label\u003e\n\u003c/div\u003e\n```\n\n## ASP.NET MVC syntax\n\n#### checkbox example\n\n```\n\u003cdiv class=\"icheck-material-teal\"\u003e\n    @Html.CheckBoxFor(m =\u003e m.SomeProperty, new { id = \"someCheckboxId\" })\n    \u003clabel for=\"someCheckboxId\"\u003eClick to check\u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### radio buttons example\n\n```\n\u003cdiv class=\"icheck-material-teal\"\u003e\n    @Html.RadioButtonFor(m =\u003e m.SomeProperty, SomeValue1, new { id = \"someRadioId1\" }) \n    \u003clabel for=\"someRadioId1\"\u003eOption 1\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"icheck-material-teal\"\u003e\n    @Html.RadioButtonFor(m =\u003e m.SomeProperty, SomeValue2, new { id = \"someRadioId2\" })\n    \u003clabel for=\"someRadioId2\"\u003eOption 2\u003c/label\u003e\n\u003c/div\u003e\n```\n\n## Color palette\n\nTry [Demo](https://bantikyan.github.io/icheck-material/)\n\n\u003cb\u003eMaterial Design Colors:\u003c/b\u003e As you can see in previous examples, icheck-material-teal class used for styling. [materialpalette.com](https://www.materialpalette.com/colors)\nYou can use following classes for material colors:\n\n\u003ccode\u003e.icheck-material-red\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-pink\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-purple\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-deeppurple\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-indigo\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-blue\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-lightblue\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-cyan\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-teal\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-green\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-lightgreen\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-lime\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-yellow\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-amber\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-orange\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-deeporange\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-brown\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-grey\u003c/code\u003e\u003cbr/\u003e\n\u003ccode\u003e.icheck-material-bluegrey\u003c/code\u003e\u003cbr/\u003e\n\nYou can also have your custom color formatting by using \u003ccode\u003eicheck-material-custom.scss\u003c/code\u003e sass file.\n\n\n## License\n\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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbantikyan%2Ficheck-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbantikyan%2Ficheck-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbantikyan%2Ficheck-material/lists"}