{"id":25762240,"url":"https://github.com/xrei/vue-material-checkbox","last_synced_at":"2026-08-06T10:30:20.143Z","repository":{"id":65412446,"uuid":"100313252","full_name":"xrei/vue-material-checkbox","owner":"xrei","description":"Lightweight material design checkbox component for Vue","archived":false,"fork":false,"pushed_at":"2023-07-12T02:03:03.000Z","size":1319,"stargazers_count":15,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-08-05T23:42:53.186Z","etag":null,"topics":["checkbox","material","vue"],"latest_commit_sha":null,"homepage":"https://xrei.github.io/vue-material-checkbox/","language":"JavaScript","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/xrei.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-14T22:08:23.000Z","updated_at":"2021-06-30T10:03:15.000Z","dependencies_parsed_at":"2024-06-18T19:49:27.938Z","dependency_job_id":"1b256ccc-7ac9-46bc-9bb7-6c42132e03bc","html_url":"https://github.com/xrei/vue-material-checkbox","commit_stats":{"total_commits":108,"total_committers":2,"mean_commits":54.0,"dds":"0.12962962962962965","last_synced_commit":"5852d277fa4ef105f82684a484a74de6e7dffa9c"},"previous_names":["romanrei/vue-material-checkbox"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/xrei/vue-material-checkbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrei%2Fvue-material-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrei%2Fvue-material-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrei%2Fvue-material-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrei%2Fvue-material-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xrei","download_url":"https://codeload.github.com/xrei/vue-material-checkbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xrei%2Fvue-material-checkbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36334201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-06T04:43:03.162Z","status":"ssl_error","status_checked_at":"2026-08-06T04:43:02.660Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["checkbox","material","vue"],"created_at":"2025-02-26T19:37:14.264Z","updated_at":"2026-08-06T10:30:19.849Z","avatar_url":"https://github.com/xrei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e⭐️Vue material checkbox⭐️\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-material-checkbox\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/vue-material-checkbox.svg\" alt=\"NPM version\"\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n#### Material design checkbox component for Vue\n\n# Demo ✅\n[Here is demo with all features](https://xrei.github.io/vue-material-checkbox/)\n\n## Breaking changes from v1\nRename plugin default name from `checkbox` to `Checkbox`\n\n# Use ❓\n### With npm\n- Install plugin\n```\nnpm install vue-material-checkbox --save\n```\n- Import to the component (recommended way)\n```javascript\n// inside vue SFC\nimport Checkbox from 'vue-material-checkbox'\nexport default {\n  components: {Checkbox}\n}\n```\n- Import to the app and add to the Vue (not recommended)\n```javascript\nimport { globalCheckbox } from 'vue-material-checkbox'\nVue.use(globalCheckbox)\n```\nAlternatively if component used with server-side-rendering\n\u003cbr\u003e\nThen import as follows below:\n```javascript\nimport { globalCheckbox } from '../node_modules/vue-material-checkbox/src/main'\n// assuming  that you're one level higher than root folder where node modules is.\nVue.use(globalCheckbox)\n```\nIn this case you will **have** to install *stylus* and *stylus-loader*  to parse styles of component.\n\n- Use it as component:\n```html\n\u003cCheckbox id=\"mycheck1\" v-model=\"someVar\" :value=\"42\"\u003eMy Checkbox\u003c/Checkbox\u003e\n```\n\nThis component must be used with `v-model` to work properly.\nBut you can pass any value to `:value` and get it from event `change` from second argument.\n\n# Component 💎\nThere is autogenerated id for label and checkbox, but you can specify it yourself.\n\nYou can specify label for checkbox inside checkbox tag:\n```html\n\u003cCheckbox id=\"mycheck1\" v-model=\"someVar\"\u003e ThisIsLabel \u003c/Checkbox\u003e\n```\n\nYou can set custom color for background of checkbox:\n```html\n\u003cCheckbox id=\"mycheck1\" v-model=\"someVar\" color=\"#f50057\"\u003e ThisIsLabel \u003c/Checkbox\u003e\n```\n\nYou can set size of the box and label font size in pixels:\n```html\n\u003cCheckbox id=\"mycheck1\" v-model=\"someVar\" :size=\"32\" fontSize=\"24\"\u003e ThisIsLabel \u003c/Checkbox\u003e\n```\n\n## Complete props table\n\n| Prop | Type | Default | What For|\n|:-:|:-:|:-:|---|\n| `id` | `String` | `undefined` | **Recommended**. input id associated with label |\n| `model` | `Boolean or Array` | `undefined` | Value for `v-model` |\n| `value` | `any` | `undefined` | Value for input, without it checkbox works as `true/false` |\n| `color` | `String` | `undefined` | Pass the color string to change bg-color of checkbox |\n| `checked` | `Boolean` | `false` | is checked by default? |\n| `name` | `String` | `undefined` | Name for input |\n| `required` | `Boolean` | `false` | HTML required attr |\n| `disabled` | `Boolean` | `false` | HTML disabled attr |\n| `size` | `Number` | `undefined` | Size of the box in px |\n| `fontSize` | `Number` | `undefined` | Size of the label font in px |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxrei%2Fvue-material-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxrei%2Fvue-material-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxrei%2Fvue-material-checkbox/lists"}