{"id":15018572,"url":"https://github.com/nstudio/nativescript-checkbox","last_synced_at":"2025-04-09T12:03:57.714Z","repository":{"id":57096036,"uuid":"64642114","full_name":"nstudio/nativescript-checkbox","owner":"nstudio","description":"NativeScript plugin for checkbox UI component ","archived":false,"fork":false,"pushed_at":"2023-10-10T19:59:03.000Z","size":3767,"stargazers_count":119,"open_issues_count":45,"forks_count":56,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-29T21:54:22.045Z","etag":null,"topics":["android","checkbox","ios","nativescript","nativescript-checkbox","nativescript-plugin","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nstudio.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":"2016-08-01T06:35:04.000Z","updated_at":"2024-05-30T15:43:03.000Z","dependencies_parsed_at":"2024-09-12T03:51:40.327Z","dependency_job_id":"bf2e75cb-5252-4e54-b009-153e6d16381a","html_url":"https://github.com/nstudio/nativescript-checkbox","commit_stats":{"total_commits":137,"total_committers":17,"mean_commits":8.058823529411764,"dds":0.6058394160583942,"last_synced_commit":"7c047bc6532bed0ab45e156ecd749e3e8453d729"},"previous_names":["bradmartin/nativescript-checkbox"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nstudio","download_url":"https://codeload.github.com/nstudio/nativescript-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036060,"owners_count":21037092,"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":["android","checkbox","ios","nativescript","nativescript-checkbox","nativescript-plugin","typescript"],"created_at":"2024-09-24T19:52:07.970Z","updated_at":"2025-04-09T12:03:57.680Z","avatar_url":"https://github.com/nstudio.png","language":"TypeScript","readme":"\u003ca align=\"center\" href=\"https://www.npmjs.com/package/@nstudio/nativescript-checkbox\"\u003e\n    \u003ch3 align=\"center\"\u003eNativeScript Checkbox\u003c/h3\u003e\n\u003c/a\u003e\n\u003ch4 align=\"center\"\u003eA NativeScript plugin to provide a checkbox widget, radio buttons are also possible.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nstudio/nativescript-checkbox\"\u003e\n        \u003cimg src=\"https://github.com/nstudio/nativescript-checkbox/workflows/Build%20CI/badge.svg\" alt=\"Action Build\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nstudio/nativescript-checkbox\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dt/nativescript-checkbox.svg?label=npm%20downloads\" alt=\"npm\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/@nstudio/nativescript-checkbox/stargazers\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/stars/@nstudio/nativescript-checkbox.svg\" alt=\"stars\"\u003e\n    \u003c/a\u003e\n    \u003cbr /\u003e\n\u003c/p\u003e\n\n---\n\n### Installation\n\nFrom your command prompt/terminal go to your app's root folder and execute:\n\n#### NativeScript 7+:\n\n```bash\nns plugin add @nstudio/nativescript-checkbox\n```\n\n#### NativeScript prior to 7:\n\n```bash\ntns plugin add @nstudio/nativescript-checkbox@1.0.0\n```\n\n#### Platform controls used:\n\n| Android                                                                                  | iOS                                                  |\n| ---------------------------------------------------------------------------------------- | ---------------------------------------------------- |\n| [Android CheckBox](https://developer.android.com/reference/android/widget/CheckBox.html) | [BEMCheckBox](http://cocoapods.org/pods/BEMCheckBox) |\n\n## Sample Usage\n\n| Android Sample                     | iOS Sample                            |\n| ---------------------------------- | ------------------------------------- |\n| ![Sample1](./screens/checkbox.gif) | ![Sample2](./screens/iosCheckbox.gif) |\n\n## Usage\n\n###\n\n```XML\n\u003cPage\n  xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n  xmlns:CheckBox=\"@nstudio/nativescript-checkbox\" loaded=\"pageLoaded\"\u003e\n  \u003cActionBar title=\"Native Checkbox\" /\u003e\n  \u003cStackLayout\u003e\n    \u003cCheckBox:CheckBox checked=\"{{ checkProp }}\" text=\"{{ myCheckText }}\" fillColor=\"{{ myCheckColor }}\" id=\"myCheckbox\" /\u003e\n    \u003cCheckBox:CheckBox text=\"CheckBox Label\" checked=\"false\" /\u003e\n  \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n###\n\n```typescript\n\nimport { CheckBox } from '@nstudio/nativescript-checkbox';\nimport { topmost } from '@nativescript/core/ui/frame';\n\npublic toggleCheck() {\n  const checkBox = topmost().getViewById('yourCheckBoxId');\n  checkBox.toggle();\n}\n\npublic getCheckProp() {\n  const checkBox = topmost().getViewById('yourCheckBoxId');\n  console.log('checked prop value = ' + checkBox.checked);\n}\n\n```\n\n### Angular Usage Sample:\n\n```typescript\nimport { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';\n\n@NgModule({\n  imports: [TNSCheckBoxModule]\n  // etc.\n})\nexport class YourModule {}\n\n// component:\nexport class SomeComponent {\n  @ViewChild('CB1') FirstCheckBox: ElementRef;\n  constructor() {}\n  public toggleCheck() {\n    this.FirstCheckBox.nativeElement.toggle();\n  }\n\n  public getCheckProp() {\n    console.log(\n      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked\n    );\n  }\n}\n```\n\n```html\n\u003cStackLayout\u003e\n  \u003cCheckBox #CB1 text=\"CheckBox Label\" checked=\"false\"\u003e\u003c/CheckBox\u003e\n  \u003cbutton (tap)=\"toggleCheck()\" text=\"Toggle it!\"\u003e\u003c/button\u003e\n  \u003cbutton (tap)=\"getCheckProp()\" text=\"Check Property\"\u003e\u003c/button\u003e\n\u003c/StackLayout\u003e\n```\n\n### NativeScript-Vue Usage Sample\n\nIn your `main.js` (The file where the root Vue instance is created) register the element\n\n```js\nVue.registerElement(\n  'CheckBox',\n  () =\u003e require('@nstudio/nativescript-checkbox').CheckBox,\n  {\n    model: {\n      prop: 'checked',\n      event: 'checkedChange'\n    }\n  }\n);\n```\n\nAnd in your template, use it as:\n\n```html\n\u003ccheck-box :checked=\"isChecked\" @checkedChange=\"isChecked = $event.value\" /\u003e\n```\n\nUse `checked` instead of `v-model`. [See #99](https://github.com/nstudio/nativescript-checkbox/issues/99).\n\n## Properties\n\n- **checked** - boolean\n- **text** - text to use with the checkbox\n- **fillColor** - Color of the checkbox element\n- **boxType** - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want `circle` on iOS and `square` on Android? Just make the `boxType` value conditional.\n\n## Events\n\n- **checkedChange** - Use a reference to the CheckBox component to grab it's `checked` property when this event fires to see the new value.\n\n## API\n\n- **toggle()** - Change the checked state of the view to the inverse of its current state.\n\n## Css Styling\n\n- **color** - set the text label color\n- **font-size** - checkbox is sized to text from here : default 15\n- **border-width** - set the line width of the checkbox element: iOS only\n\n## Styling [Android]\n\n- **checkStyle** - set to the name of your drawable\n- **checkPadding** - set the padding of the checkbox\n\nAdd the following to `app/App_Resources/Android/drawable/checkbox_grey.xml`\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\n\u003cselector xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003citem android:state_enabled=\"false\" android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_incomplete\" /\u003e\n    \u003citem android:state_enabled=\"false\" android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey_incomplete\" /\u003e\n    \u003citem android:state_checked=\"true\" android:drawable=\"@drawable/ic_checkbox_checked_grey\"/\u003e\n    \u003citem android:state_checked=\"false\" android:drawable=\"@drawable/ic_checkbox_grey\" /\u003e\n\u003c/selector\u003e\n```\n\n## Radiobuttons, anyone?\n\nWant to use radiobutton behavior for your checkboxes (only one option possible within a group)?\nSet `boxType=\"circle\"` and check out the second tab in the [Angular demo](demo-ng/), here's a screenshot:\n\n\u003cimg src=\"./screens/radiobuttons.png\" width=\"225px\"/\u003e\n\n## Contributing \u0026 Running Demo Apps\n\n- Execute from root:\n  - For android: `npm run demo.android`\n  - For iOS: `npm run demo.ios`\n  - `npm run demo.ng.android` (for angular android)\n  - `npm run demo.ng.ios` (for angular ios)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstudio%2Fnativescript-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnstudio%2Fnativescript-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstudio%2Fnativescript-checkbox/lists"}