{"id":13755431,"url":"https://github.com/trendmicro-frontend/react-checkbox","last_synced_at":"2025-09-04T14:32:29.169Z","repository":{"id":57167626,"uuid":"90841236","full_name":"trendmicro-frontend/react-checkbox","owner":"trendmicro-frontend","description":"React Checkbox component","archived":false,"fork":false,"pushed_at":"2023-09-22T14:07:27.000Z","size":4460,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-12-12T12:18:08.442Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-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/trendmicro-frontend.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}},"created_at":"2017-05-10T08:39:15.000Z","updated_at":"2023-09-22T14:07:31.000Z","dependencies_parsed_at":"2024-01-17T15:04:18.608Z","dependency_job_id":"7b9dedd4-6b76-4eb9-a693-79c2dedfd538","html_url":"https://github.com/trendmicro-frontend/react-checkbox","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231970001,"owners_count":18453899,"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":"2024-08-03T10:00:54.177Z","updated_at":"2024-12-31T09:32:45.796Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","funding_links":[],"categories":["Trend Micro"],"sub_categories":["React Components"],"readme":"# react-checkbox [![build status](https://travis-ci.org/trendmicro-frontend/react-checkbox.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-checkbox) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-checkbox/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-checkbox?branch=master)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-checkbox.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-checkbox/)\n\nReact Checkbox\n\nDemo: https://trendmicro-frontend.github.io/react-checkbox\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-checkbox](https://github.com/trendmicro-frontend/react-checkbox):\n\n  ```\n  npm install --save react @trendmicro/react-checkbox\n  ```\n\n2. At this point you can import `@trendmicro/react-checkbox` and its styles in your application as follows:\n\n  ```js\n  import { Checkbox, CheckboxGroup } from '@trendmicro/react-checkbox';\n\n  // Be sure to include styles at some point, probably during your bootstraping\n  import '@trendmicro/react-checkbox/dist/react-checkbox.css';\n  ```\n\n## Usage\n\n```jsx\n\u003cCheckbox label=\"Checkbox label\" /\u003e\n```\n\nThe label prop is optional, you can use children to pass through the component.\n\n```jsx\n\u003cCheckbox label=\"Checkbox label\"\u003e\n    \u003cp style={{ marginLeft: 24 }}\u003e\n        Lorem ipsum dolor sit amet...\n    \u003c/p\u003e\n\u003c/Checkbox\u003e\n\n\u003cCheckbox\u003e\n    \u003cspan style={{ verticalAlign: 'middle', marginLeft: 8 }}\u003e\n        Lorem ipsum dolor sit amet...\n    \u003c/span\u003e\n\u003c/Checkbox\u003e\n```\n\n### Uncontrolled Checkbox\n\n```js\n// Default checked\n\u003cCheckbox defaultChecked /\u003e\n\n// Default partially checked\n\u003cCheckbox defaultChecked defaultIndeterminate /\u003e\n```\n\n### Controlled Checkbox\n\n```js\n// Checked\n\u003cCheckbox checked /\u003e\n\n// Partially checked\n\u003cCheckbox checked indeterminate /\u003e\n```\n\n### CheckboxGroup\n\nWhen rendering checkboxes deeply nested inside the checkbox group, you need to pass a `depth` prop to limit the recursion depth.\n\n```jsx\n\u003cCheckboxGroup\n    name=\"comic\"\n    value={this.state.value}\n    depth={3} // This is needed to minimize the recursion overhead\n    onChange={(value, event) =\u003e {\n        this.setState({ value: value });\n    }}\n\u003e\n    \u003cdiv className=\"row\"\u003e\n        \u003cdiv className=\"col-xs-12 col-sm-6\"\u003e\n            \u003cCheckbox label=\"Batman (DC)\" value=\"dc:batman\" /\u003e\n            \u003cCheckbox label=\"Hulk (Marvel)\" value=\"marvel:hulk\" /\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"col-xs-12 col-sm-6\"\u003e\n            \u003cCheckbox label=\"Superman (DC)\" value=\"dc:superman\" /\u003e\n            \u003cCheckbox label=\"Spider-Man (Marvel)\" value=\"marvel:spiderman\" disabled /\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/CheckboxGroup\u003e\n```\n\n## Prevent onChange Propagation\n\nYou may need to use `event.stopPropagation()` to stop **onChange** propagation when wrapping an input element inside the **CheckboxGroup** or **Checkbox** component.\n\n```jsx\n\u003cCheckboxGroup\n    name=\"checkboxgroup\"\n    value={this.state.value}\n    onChange={(value, event) =\u003e {\n        this.setState({ value: value });\n    }}\n\u003e\n    \u003cCheckbox label=\"First option\" value=\"one\"\u003e\n        \u003cdiv style={{ marginLeft: 22 }}\u003e\n            \u003cinput\n                type=\"text\"\n                onChange={(event) =\u003e {\n                    // Prevent onChange propagation\n                    event.stopPropagation();\n                }}\n            /\u003e\n        \u003c/div\u003e\n    \u003c/Checkbox\u003e\n    \u003cCheckbox label=\"Second option\" value=\"two\"\u003e\n        \u003cdiv style={{ marginLeft: 22 }}\u003e\n            \u003cinput\n                type=\"text\"\n                onChange={(event) =\u003e {\n                    // Prevent onChange propagation\n                    event.stopPropagation();\n                }}\n            /\u003e\n        \u003c/div\u003e\n    \u003c/Checkbox\u003e\n\u003c/CheckboxGroup\u003e\n```\n\n## API\n\n### Properties\n\n#### Checkbox\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\nchildren | any | | Children to pass through the component.\nclassName | Object | | Customized class name for the component.\nstyle | Object | | Customized style for the component.\nlabel | Node or String | | Text label to attach next to the checkbox element.\ninputClassName | Object | | Customized class name for the checkbox element.\ninputStyle | Object | | Customized style for the checkbox element.\ndisabled | Boolean | false | If true, the checkbox shown as disabled and cannot be modified.\nchecked | Boolean | | The checked state of the checkbox element.\ndefaultChecked | Boolean | | The default checked state of the checkbox element.\nindeterminate | Boolean | | The indeterminate state of the checkbox element.\ndefaultIndeterminate | Boolean | false | The default indeterminate state of the checkbox element.\nonChange | Function(event) | | The callback function that is triggered when the state changes.\nonClick | Function(event) | | The callback function that is triggered when the checkbox is clicked.\n\n#### CheckboxGroup\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\nchildren | any | | Children to pass through the component.\ndisabled | Boolean | false | If true, the checkbox group will be displayed as disabled.\nname | String | | Name for the input element group.\nvalue | any | | The value of the checkbox group.\ndefaultValue | any | | The default value of the checkbox group.\nonChange | Function(value, event) | | The callback function that is triggered when the value changes.\ndepth | Number | 1 | Limits the recursion depth when rendering checkboxes deeply inside a checkbox group.\n\n### Class Properties\n\nUse the ref property to get a reference to the component:\n\n```jsx\n\u003cCheckbox\n    ref={node =\u003e {\n        if (node) {\n            this.checkbox = node;\n            console.log(this.checkbox.checked);\n            console.log(this.checkbox.indeterminate);\n        }\n    }}\n/\u003e\n```\n\nName | Type | Description\n:--- | :--- | :----------\nchecked | Boolean | Get the checked state.\nindeterminate | Boolean | Get the indeterminate state.\n\n#### CheckboxGroup\n\nUse the ref property to get a reference to this component:\n\n```jsx\n\u003cCheckboxGroup\n    ref={node =\u003e {\n        if (node) {\n            this.checkboxGroup = node;\n            console.log(this.checkboxGroup.value);\n        }\n    }}\n/\u003e\n```\n\nName | Type | Description\n:--- | :--- | :----------\nvalue | any | Get the value of the checkbox group.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-checkbox/lists"}