{"id":26322816,"url":"https://github.com/startpolymer/s-checkbox","last_synced_at":"2026-03-11T05:31:03.518Z","repository":{"id":58242542,"uuid":"79965006","full_name":"StartPolymer/s-checkbox","owner":"StartPolymer","description":"Up-to-date fork of Material Design checkbox \u003cpaper-checkbox\u003e with new features.","archived":false,"fork":false,"pushed_at":"2017-01-30T09:17:27.000Z","size":159,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T21:09:15.067Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StartPolymer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-24T23:29:51.000Z","updated_at":"2017-07-18T19:41:01.000Z","dependencies_parsed_at":"2022-08-31T00:41:03.311Z","dependency_job_id":null,"html_url":"https://github.com/StartPolymer/s-checkbox","commit_stats":null,"previous_names":["startpolymer/s-paper-checkbox"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StartPolymer","download_url":"https://codeload.github.com/StartPolymer/s-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243762268,"owners_count":20343979,"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":[],"created_at":"2025-03-15T17:15:27.639Z","updated_at":"2025-12-12T03:41:47.987Z","avatar_url":"https://github.com/StartPolymer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org][webcomponents-image]][webcomponents-url]\n\n## \\\u003cs-checkbox\\\u003e\n\n`s-checkbox` is a [material design checkbox](https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox).\nUser can tap the checkbox to check or uncheck it. Usually you use checkboxes\nto allow user to select multiple options from a set. If you have a single\nON/OFF option, avoid using a single checkbox and use `paper-toggle-button`\ninstead.\n\n`s-checkbox` is up-to-date fork of [`paper-checkbox`](https://github.com/PolymerElements/paper-checkbox).\n\n## New Features\n\n- [Fix colors by Material Design](https://github.com/StartPolymer/s-checkbox/commit/6e5241b43786071277cc7a13eee7a5c91f1a238d)\n- [Support for custom prefix element](https://github.com/StartPolymer/s-checkbox/commit/710c8b946738c9b9042e43b6844e940d6e8e0429), which is displayed before the checkbox itself. From `paper-input` element.\n\n## Demo\n\n[Full demo][webcomponents-demo]\n\n## Usage\n\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"s-checkbox.html\"\u003e\n    \u003cstyle is=\"custom-style\"\u003e\n      s-checkbox {\n        font-family: 'Roboto', sans-serif;\n        margin: 24px;\n      }\n\n      s-checkbox:first-child {\n        --primary-color: #ff5722;\n      }\n\n      s-checkbox.styled {\n        align-self: center;\n        border: 1px solid var(--paper-green-200);\n        padding: 8px 16px;\n        --s-checkbox-checked-color: var(--paper-green-500);\n        --s-checkbox-checked-ink-color: var(--paper-green-500);\n        --s-checkbox-unchecked-color: var(--paper-green-900);\n        --s-checkbox-unchecked-ink-color: var(--paper-green-900);\n        --s-checkbox-label-color: var(--paper-green-500);\n        --s-checkbox-label-spacing: 0;\n        --s-checkbox-margin: 8px 16px 8px 0;\n        --s-checkbox-vertical-align: top;\n      }\n\n      s-checkbox .subtitle {\n        display: block;\n        font-size: 0.8em;\n        margin-top: 2px;\n        max-width: 150px;\n      }\n\n      s-checkbox [prefix] {\n        margin-right: 16px;\n      }\n    \u003c/style\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cs-checkbox checked\u003eChecked\u003c/s-checkbox\u003e\n\n\u003cs-checkbox\u003e\n  \u003cspan prefix\u003e\u0026bull;\u003c/span\u003e\n  With prefix\n\u003c/s-checkbox\u003e\n\n\u003cs-checkbox class=\"styled\"\u003e\n  Checkbox\n  \u003cspan class=\"subtitle\"\u003e\n    With a longer label\n  \u003c/span\u003e\n\u003c/s-checkbox\u003e\n\n\u003cs-checkbox disabled\u003eDisabled\u003c/s-checkbox\u003e\n```\n\n## Installation\n\n`bower i s-checkbox -S`\n\n## Install the Polymer-CLI\n\nFirst, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.\n\n## Viewing Your Application\n\n```\n$ polymer serve\n```\n\n## Building Your Application\n\n```\n$ polymer build\n```\n\nThis will create a `build/` folder with `bundled/` and `unbundled/` sub-folders\ncontaining a bundled (Vulcanized) and unbundled builds, both run through HTML,\nCSS, and JS optimizers.\n\nYou can serve the built versions by giving `polymer serve` a folder to serve\nfrom:\n\n```\n$ polymer serve build/bundled\n```\n\n## Running Tests\n\n```\n$ polymer test\n```\n\nYour application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.\n\n## License\n\nMIT: [StartPolymer/license](https://github.com/StartPolymer/license)\n\n[webcomponents-image]: https://img.shields.io/badge/webcomponents.org-published-blue.svg\n[webcomponents-url]: https://beta.webcomponents.org/element/StartPolymer/s-checkbox\n[webcomponents-demo]: https://beta.webcomponents.org/element/StartPolymer/s-checkbox/demo/demo/index.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstartpolymer%2Fs-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstartpolymer%2Fs-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstartpolymer%2Fs-checkbox/lists"}