{"id":29220077,"url":"https://github.com/nicolassutter/vue-simple-custom-checkbox","last_synced_at":"2025-07-03T02:08:15.439Z","repository":{"id":109214207,"uuid":"362162638","full_name":"nicolassutter/vue-simple-custom-checkbox","owner":"nicolassutter","description":null,"archived":false,"fork":false,"pushed_at":"2021-04-27T15:46:31.000Z","size":146,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T23:48:17.998Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/nicolassutter.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-04-27T15:31:24.000Z","updated_at":"2021-04-27T15:46:33.000Z","dependencies_parsed_at":"2023-03-13T14:15:08.176Z","dependency_job_id":null,"html_url":"https://github.com/nicolassutter/vue-simple-custom-checkbox","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"f9d9734457ea8f5d63b2a7edd4f27cf72387810c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nicolassutter/vue-simple-custom-checkbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolassutter%2Fvue-simple-custom-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolassutter%2Fvue-simple-custom-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolassutter%2Fvue-simple-custom-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolassutter%2Fvue-simple-custom-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicolassutter","download_url":"https://codeload.github.com/nicolassutter/vue-simple-custom-checkbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolassutter%2Fvue-simple-custom-checkbox/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260475209,"owners_count":23014846,"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-07-03T02:08:14.772Z","updated_at":"2025-07-03T02:08:15.418Z","avatar_url":"https://github.com/nicolassutter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Simple Custom Select\r\n\r\nA simple Vue component for customized and customizable checkboxes.\r\n\r\n[Demo available here](https://codepen.io/Sinuto/pen/yLgrerj)\r\n## \u003ca id=\"get-started\"\u003e\u003c/a\u003e Get started\r\n\r\n````sh\r\nnpm i vue-simple-custom-checkbox\r\n````\r\n\r\nYou can then use it by importing it in your chosen Vue project.\r\n\r\n````vue\r\n\u003ctemplate\u003e\r\n \u003cvue-simple-checkbox class=\"my-checkbox\" v-model=\"isChecked\" /\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport VueSimpleCheckbox from 'vue-simple-custom-checkbox'\r\n\r\nexport default {\r\n  name:  'Your component',\r\n  components: {\r\n    VueSimpleCheckbox \r\n  },\r\n  data() {\r\n    return {\r\n      isChecked: false\r\n    }\r\n  }\r\n}\r\n\u003c/script\u003e\r\n\r\n\u003cstyle lang=\"scss\" scoped\u003e\r\n// Customizing styles\r\n.my-checkbox {\r\n  --input-size: 3em;\r\n}\r\n\u003c/style\u003e\r\n````\r\n\r\n## Props\r\n\r\n| Name | Default | Description |\r\n|--|--|--|\r\n| `checked` | `false` | The default checked status |\r\n| `disabled` | `false` | If the checkbox should be disabled |\r\n| `id` | `''` | The optionnal id of the checkbox|\r\n| `name` | `''` | Optionnal name of the input |\r\n| `title` | `''` | Optionnal title of the input |\r\n\r\n## V-model\r\n\r\nThe component uses a custom model, it is binded to the `checked` prop and to the `input` event.\r\n\r\n**Therefore** you do not have to use the prop `checked` or listen to `input`, simply bind a `v-model` like in [this example](#get-started).\r\n\r\n## Styles\r\n\r\nThe components uses only a few styles that can be easily changed and adapted.\r\n\r\nThe values can be changed using the custom css properties listed below.\r\n\r\n\u003e Every class is nested inside `.vue-simple-checkbox-container`.\r\n\r\n\u003e The `font-size` is set to `62.5%` by default on the container, with a 16px root font-size, `1em` is then equal to 10px.\r\n\r\n### The container\r\n\r\n| Property | Description | Default |\r\n|----------|---------|-------------|\r\n| `--font-size` | The `font-size` inside the container | `62.5%`\r\n\r\n### The input\r\n\r\n| Property | Description | Default |\r\n|----------|---------|-------------|\r\n| `--input-size` | The size of the custom checkbox | `2em`\r\n\r\n### The borders\r\n\r\n| Property | Description | Default |\r\n|------|-------------|-------------|\r\n| `--border-width` | The width of the custom checkbox's border | `.1em`\r\n| `--border-radius` | The radius of the checkbox's border | `.5em`\r\n| `--border-style` | The style of the checkbox's border | `solid`\r\n\r\n### The transitions\r\n\r\n| Property | Description | Default |\r\n|------|-------------|-------------|\r\n| `--default-bg-transition` | The background transition between checked and unchecked | `background-color .1s ease-in`\r\n| `--default-opacity-transition` | The icon's transition between opacity 0 and 1 | `opacity 0.3s ease-in`\r\n\r\n### The Colors\r\n\r\n| Property | Description | Default |\r\n|------|-------------|-------------|\r\n| `--icon-color` | The color of the icon | `white` |\r\n| `--primary` | The background color of the checkbox | `#3B82F6` |\r\n| `--secondary` | The color used for the focus state | `#93C5FD` |\r\n\r\n### The Focus State\r\n\r\n| Property | Description | Default |\r\n|------|-------------|-------------|\r\n| `--outline-width` | The desired width of the outline | `.2em` |\r\n| `--offset-width` | The offset's width, for no offset, set to it `0` | `.1em` |\r\n| `--offset-color` | The color of the offset | `white` |\r\n\r\n### Side notes\r\n\r\nThe component is originally made for my personnal use and therefore may contain bugs (that can be reported on the [GitHub repo](https://github.com/nicolassutter/vue-simple-custom-checkbox)).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolassutter%2Fvue-simple-custom-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolassutter%2Fvue-simple-custom-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolassutter%2Fvue-simple-custom-checkbox/lists"}