{"id":13446701,"url":"https://github.com/lokesh-coder/pretty-checkbox","last_synced_at":"2025-05-14T08:10:08.671Z","repository":{"id":47797369,"uuid":"63314756","full_name":"lokesh-coder/pretty-checkbox","owner":"lokesh-coder","description":"A pure CSS library to beautify checkbox and radio buttons.","archived":false,"fork":false,"pushed_at":"2020-10-14T16:34:51.000Z","size":2769,"stargazers_count":1810,"open_issues_count":56,"forks_count":153,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-11T03:24:14.837Z","etag":null,"topics":["animation","bootstrap","checkbox","css","html","icons","radio-buttons","react","scss"],"latest_commit_sha":null,"homepage":"https://lokesh-coder.github.io/pretty-checkbox/","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/lokesh-coder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-14T07:52:55.000Z","updated_at":"2025-05-07T01:22:24.000Z","dependencies_parsed_at":"2022-08-12T13:50:44.781Z","dependency_job_id":null,"html_url":"https://github.com/lokesh-coder/pretty-checkbox","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fpretty-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fpretty-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fpretty-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fpretty-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lokesh-coder","download_url":"https://codeload.github.com/lokesh-coder/pretty-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101559,"owners_count":22014908,"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":["animation","bootstrap","checkbox","css","html","icons","radio-buttons","react","scss"],"created_at":"2024-07-31T05:00:57.476Z","updated_at":"2025-05-14T08:10:03.646Z","avatar_url":"https://github.com/lokesh-coder.png","language":"CSS","readme":"\u003ch1 align=\"center\"\u003e\r\n  \u003cbr\u003e\r\n  \u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox/\"\u003e\u003cimg src=\"logo.png\" alt=\"Pretty checkbox\" width=\"100\"\u003e\u003c/a\u003e\r\n  \u003cbr\u003e \u003cbr\u003e pretty-checkbox.css \u003cbr\u003e\r\n\u003c/h1\u003e\r\n\r\n\u003ch4 align=\"center\"\u003eA pure CSS library to beautify checkbox and radio buttons.\u003c/h4\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n \u003ca href=\"https://github.com/lokesh-coder/pretty-checkbox/releases\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/release/lokesh-coder/pretty-checkbox.svg?style=flat-square\u0026colorA=8033b0\u0026colorB=75b7dd\" alt=\"Github Release\"\u003e\r\n  \u003c/a\u003e\r\n   \u003ca href=\"LICENSE\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square\u0026colorA=8033b0\u0026colorB=75b7dd\" alt=\"Licence\"\u003e\r\n  \u003c/a\u003e\r\n   \u003ca href=\"#\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/npm/dm/pretty-checkbox.svg?style=flat-square\u0026colorA=8033b0\u0026colorB=75b7dd\" alt=\"Downloads\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\u003cbr\u003e\r\n\r\n\u003cdiv class=\"highlight highlight-source-shell\"\u003e\r\n\u003cpre\u003e\r\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003eDemo and documentation\u003c/strong\u003e\u003c/div\u003e\r\n\u003cdiv align=\"center\"\u003e\u003ca align=\"center\" href=\"https://lokesh-coder.github.io/pretty-checkbox/\"\u003ehttps://lokesh-coder.github.io/pretty-checkbox/\u003c/a\u003e\u003c/div\u003e\r\n\u003c/pre\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\u003cimg src=\"preview.gif\" alt=\"Pretty checkbox preview\"/\u003e\r\n\u003c/div\u003e\r\n\r\n### Features\r\n* Basic\r\n  - **Shapes** - *Square*, *Curve*, *Round* \r\n  - **Variants** - *Default*, *Fill*, *Thick*\r\n  - **Colors** - *Primary*, *Success*, *Info*, *Warning*, *Danger* \r\n  - **Color types** - *Solid*, *Outline*\r\n  - **Animations** - *Smooth*, *Tada*, *Jelly*, *Pulse*, *Rotate*\r\n * Switch - iOS style - *Outline*, *Fill*, *Slim*\r\n * Responsive\r\n * No JavaScript\r\n * Custom Font Icons\r\n * SVG Icons\r\n * Image support\r\n * Toggle between icons / SVG's / images\r\n * Lock\r\n * State - *Focus*, *Hover*, *Indeterminate*\r\n * Supports frameworks - *Bootstrap*, *Foundation*, *Sematic UI*, *Bulma*, ...\r\n * SCSS customization\r\n * Supports all modern browsers, including mobile devices\r\n * Print friendly\r\n * and more... ( *I am kidding, that's all!* )\r\n\r\n### Installation\r\n- **From CLI**\r\n\r\nInstall the library from [`npm`](https://www.npmjs.com/package/pretty-checkbox) or [`yarn`](https://yarnpkg.com/en/package/pretty-checkbox) package manager\r\n\r\n```sh\r\n\u003e npm install pretty-checkbox // or\r\n\u003e yarn add pretty-checkbox\r\n```\r\nAdd `pretty-checkbox.min.css` in your html\r\n\r\n\u003cbr\u003e\r\n\r\n- **From CDN** ( [`jsDelivr`](https://www.jsdelivr.com/package/npm/pretty-checkbox) )\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css\"/\u003e\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n- **Manual download** ( [`Github`](https://github.com/lokesh-coder/pretty-checkbox/archive/master.zip) )\r\n\r\nDownload the source from Github.\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"../\u003cPATH\u003e/pretty-checkbox/dist/pretty-checkbox.min.css\"/\u003e\r\n```\r\n`\u003cPATH\u003e` is where the library is downloaded.\r\n\r\n\u003cbr\u003e\r\n\r\n**SCSS**\r\n\r\nYou can also import `pretty-checkbox.scss` in your main scss file.\r\n```scss\r\n@import '~pretty-checkbox/src/pretty-checkbox.scss';\r\n```\r\n\r\nPlease refer the document for SCSS settings.\r\n\r\n\r\n### Usage\r\n\r\n\r\nPretty checkbox comes with many styles,\r\n\r\n| Class name  | Description              |\r\n| :---------- | :----------------------- |\r\n| `p-default` | Basic style              |\r\n| `p-switch`  | iOS like toggle style    |\r\n| `p-icon`    | Custom font icons        |\r\n| `p-svg`     | Custom SVG files, markup |\r\n| `p-image`   | Tiny images              |\r\n\r\nAnd three shapes `p-round` `p-curve` `p-square` (default)\r\n\r\n\r\n#### Basic checkbox\r\n\r\n```html\r\n  \u003cdiv class=\"pretty p-default\"\u003e\r\n    \u003cinput type=\"checkbox\" /\u003e\r\n    \u003cdiv class=\"state\"\u003e\r\n      \u003clabel\u003eCheck me\u003c/label\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n```\r\n\r\nBasic checkbox has three variants `p-fill` `p-thick` `p-outline` (default)\r\n\r\nYou can combine them.\r\n\r\n```html\r\n  \u003cdiv class=\"pretty p-default p-curve p-fill\"\u003e\r\n    \u003cinput type=\"checkbox\" /\u003e\r\n    \u003cdiv class=\"state\"\u003e\r\n      \u003clabel\u003eFill\u003c/label\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n```\r\n\r\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003e---\u003c/strong\u003e\u003c/div\u003e\r\n\r\n#### Switch checkbox\r\n\r\nSwitch has three variants `p-outline` `p-fill` `p-slim`\r\n\r\n```html\r\n  \u003cdiv class=\"pretty p-switch p-fill\"\u003e\r\n    \u003cinput type=\"checkbox\" /\u003e\r\n    \u003cdiv class=\"state\"\u003e\r\n      \u003clabel\u003eOn\u003c/label\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n```\r\n\r\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003e---\u003c/strong\u003e\u003c/div\u003e\r\n\r\n#### Custom Font icons\r\n\r\n```html\r\n  \u003cdiv class=\"pretty p-icon\"\u003e\r\n    \u003cinput type=\"checkbox\"\u003e\r\n    \u003cdiv class=\"state\"\u003e\r\n      \u003ci class=\"icon fa fa-check\"\u003e\u003c/i\u003e\r\n      \u003clabel\u003eCheck me\u003c/label\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n```\r\n\r\n\u003cblockquote\u003e\r\n    \u003csub\u003e\r\n    \t\u003cstrong\u003eNote\u003c/strong\u003e: class `icon` should be added along with icon class names\r\n    \u003c/sub\u003e\r\n\u003c/blockquote\u003e\r\n\r\n\u003cblockquote\u003e\r\n    \u003csub\u003e\r\n    \t\u003cstrong\u003eNote\u003c/strong\u003e: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately. \r\n    \u003c/sub\u003e\r\n\u003c/blockquote\u003e\r\n\r\n\u003cdiv align=\"right\"\u003e\r\n \u003ci\u003e\u003csub\u003e\u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox#fonticons\"\u003e\r\n more details\u003c/a\u003e\u003c/sub\u003e\u003c/i\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003e---\u003c/strong\u003e\u003c/div\u003e\r\n\r\n#### SVG\r\n\r\nSupports SVG file in \u003cimg/\u003e tag, markup (`\u003csvg\u003e ... \u003c/svg\u003e`) and sprites  \r\n\r\n```html\r\n  \u003cdiv class=\"pretty p-svg\"\u003e\r\n    \u003cinput type=\"checkbox\"\u003e\r\n    \u003cdiv class=\"state\"\u003e\r\n      \u003cimg class=\"svg\" src=\"file.svg\" /\u003e\r\n      \u003clabel\u003eCheck me\u003c/label\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n```\r\n\r\n\u003cblockquote\u003e\r\n    \u003csub\u003e\r\n    \t\u003cstrong\u003eNote\u003c/strong\u003e: class `svg` to be added in img tag or svg tag.\r\n    \u003c/sub\u003e\r\n\u003c/blockquote\u003e\r\n\r\n\u003cdiv align=\"right\"\u003e\r\n \u003ci\u003e\u003csub\u003e\u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox#svg\"\u003emore details\u003c/a\u003e\u003c/sub\u003e\u003c/i\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003e---\u003c/strong\u003e\u003c/div\u003e\r\n\r\n#### Image\r\n\r\nSupports any type of valid image format.\r\n\r\n```html\r\n  \u003cdiv class=\"pretty p-image\"\u003e\r\n    \u003cinput type=\"checkbox\" /\u003e\r\n    \u003cdiv class=\"state\"\u003e\r\n      \u003cimg class=\"image\" src=\"/check.png\" /\u003e\r\n      \u003clabel\u003eBlock\u003c/label\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n```\r\n\r\n\u003cblockquote\u003e\r\n    \u003csub\u003e\r\n    \t\u003cstrong\u003eNote\u003c/strong\u003e: class `image` to be added in img tag.\r\n    \u003c/sub\u003e\r\n\u003c/blockquote\u003e\r\n\r\n\u003cdiv align=\"right\"\u003e\r\n \u003ci\u003e\u003csub\u003e\u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox#image\"\u003emore details\u003c/a\u003e\u003c/sub\u003e\u003c/i\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003e---\u003c/strong\u003e\u003c/div\u003e\r\n\r\n#### Colors\r\n\r\nThere are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger`\r\n\r\nAnd five outline colors  `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o`\r\n\r\n```html\r\n  \u003cdiv class=\"pretty p-default p-curve p-thick\"\u003e\r\n    \u003cinput type=\"checkbox\" /\u003e\r\n    \u003cdiv class=\"state p-warning\"\u003e\r\n      \u003clabel\u003eWarning\u003c/label\u003e\r\n    \u003c/div\u003e\r\n  \u003c/div\u003e\r\n```\r\n\u003cblockquote\u003e\r\n    \u003csub\u003e\r\n    \t\u003cstrong\u003eNote\u003c/strong\u003e: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.\r\n    \u003c/sub\u003e\r\n\u003c/blockquote\u003e\r\n\r\n\u003cdiv align=\"right\"\u003e\r\n \u003ci\u003e\u003csub\u003e\u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox#colors\"\u003emore details\u003c/a\u003e\u003c/sub\u003e\u003c/i\u003e\r\n\u003c/div\u003e\r\n\r\n### More\r\n\r\nThere are more features like  ***Radio buttons*** , ***Toggle*** , ***States*** , ***Animations*** , ***Border less*** , ***Lock*** , ***Scale***, ***SCSS Settings***. \r\n\r\nPlease refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them.\r\n\r\n\r\n### Browser support\r\n\r\nWorks in all modern browsers.\r\n\r\n`Chrome \u003e= 26` `Firefox \u003e= 16` `Safari \u003e= 6.1` `Opera \u003e= 15` `IE \u003e= 9`\r\n\r\n### Font Icon libraries\r\n* [Font awesome](http://fontawesome.io/icons/)\r\n* [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons)\r\n* [Material icon ( MDI )](https://materialdesignicons.com/)\r\n* [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html)\r\n* [Ion icons](http://ionicons.com/)\r\n* [Typicons](http://www.typicons.com/)\r\n* [Material icon ( Google )](https://material.io/icons)\r\n* Others not tested, but will work ( 99% ).\r\n\r\n\r\n### SVG\r\n* [UIKit](https://getuikit.com/docs/icon)\r\n* [Feathers](https://feathericons.com/)\r\n* Others\r\n\r\n### Libraries\r\n- VueJs - [pretty-checkbox-vue](https://github.com/hamed-ehtesham/pretty-checkbox-vue)\r\n- Angular - [ngx-pretty-checkbox](https://github.com/miladfm/ngx-pretty-checkbox)\r\n\r\n### Inspiration\r\n- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea\r\n- [Animista](http://animista.net) - Animations\r\n\r\n### Contributions\r\nThanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!\r\n\r\n### License\r\nThis project is licensed under the MIT License\r\n\r\n\r\n\u003cdiv align=\"center\"\u003e\u003csub\u003e❤\u003c/sub\u003e\u003c/div\u003e \r\n","funding_links":[],"categories":["CSS","📦 Legacy \u0026 Inactive Projects","Libraries and Mixins","Uncategorized","Frameworks / Resources"],"sub_categories":["Miscellaneous","Uncategorized","P"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flokesh-coder%2Fpretty-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flokesh-coder%2Fpretty-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flokesh-coder%2Fpretty-checkbox/lists"}