{"id":24911436,"url":"https://github.com/accessible-ui/checkbox","last_synced_at":"2025-10-28T19:32:15.316Z","repository":{"id":40795254,"uuid":"227722839","full_name":"accessible-ui/checkbox","owner":"accessible-ui","description":"🅰 An accessible and versatile checkbox component for React","archived":false,"fork":false,"pushed_at":"2023-01-06T02:20:54.000Z","size":817,"stargazers_count":5,"open_issues_count":17,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-01T09:27:22.693Z","etag":null,"topics":["a11y","a11y-checkbox","a11y-switch","aria","aria-checkbox","aria-switch","checkbox","checkbox-component","react","switch","switch-component","swithc"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/accessiblecheckbox-examples-epc8b","language":"TypeScript","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/accessible-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-13T00:36:00.000Z","updated_at":"2021-06-03T07:19:39.000Z","dependencies_parsed_at":"2023-02-05T02:45:27.797Z","dependency_job_id":null,"html_url":"https://github.com/accessible-ui/checkbox","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accessible-ui%2Fcheckbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accessible-ui%2Fcheckbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accessible-ui%2Fcheckbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accessible-ui%2Fcheckbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/accessible-ui","download_url":"https://codeload.github.com/accessible-ui/checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236750116,"owners_count":19198814,"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":["a11y","a11y-checkbox","a11y-switch","aria","aria-checkbox","aria-switch","checkbox","checkbox-component","react","switch","switch-component","swithc"],"created_at":"2025-02-02T04:20:07.870Z","updated_at":"2025-10-16T22:30:26.003Z","avatar_url":"https://github.com/accessible-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003chr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003e\n    \u0026lt;Checkbox\u0026gt;\n  \u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@accessible/checkbox\"\u003e\n    \u003cimg alt=\"Bundlephobia\" src=\"https://img.shields.io/bundlephobia/minzip/@accessible/checkbox?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Types\" href=\"https://www.npmjs.com/package/@accessible/checkbox\"\u003e\n    \u003cimg alt=\"Types\" src=\"https://img.shields.io/npm/types/@accessible/checkbox?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Code coverage report\" href=\"https://codecov.io/gh/accessible-ui/checkbox\"\u003e\n    \u003cimg alt=\"Code coverage\" src=\"https://img.shields.io/codecov/c/gh/accessible-ui/checkbox?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Build status\" href=\"https://travis-ci.org/accessible-ui/checkbox\"\u003e\n    \u003cimg alt=\"Build status\" src=\"https://img.shields.io/travis/accessible-ui/checkbox?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/@accessible/checkbox\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@accessible/checkbox?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"https://jaredlunde.mit-license.org/\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/npm/l/@accessible/checkbox?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cpre align=\"center\"\u003enpm i @accessible/checkbox\u003c/pre\u003e\n\u003chr\u003e\n\nAn accessible checkbox component for React. This library allows you to create\nyour own a checkbox with your own styles while maintaining the ability to\nfocus and update a checkbox input with the keyboard.\n\n## Quick Start\n\n[Check out the example on **CodeSandbox**](https://codesandbox.io/s/accessiblecheckbox-examples-epc8b)\n\n```jsx harmony\nimport {Checkbox, Checkmark} from '@accessible/checkbox'\n\nconst MyCheckbox = () =\u003e (\n  \u003clabel className='my-checkbox'\u003e\n    \u003cCheckbox name='my-field-name'\u003e\n      \u003cspan className='my-checkbox'\u003e\n        \u003cCheckmark checkedClass='checked' uncheckedClass='unchecked'\u003e\n          \u003cspan className='checkmark' /\u003e\n        \u003c/Checkmark\u003e\n      \u003c/span\u003e\n    \u003c/Checkbox\u003e\n    Check me!\n  \u003c/label\u003e\n)\n```\n\n## API\n\n### \u0026lt;Checkbox\u0026gt;\n\nCreates a visually hidden checkbox input that is focusable and accessible via keyboard navigation.\nAll props passed to this component are applied to the `\u003cinput\u003e`. This also creates a context\nprovider enabling the other components in this library to access the checkbox's state\ndeep in the tree.\n\n#### Props\n\n| Prop           | Type                        | Default     | Required? | Description                                                                                                              |\n| -------------- | --------------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------ |\n| checked        | `boolean`                   | `undefined` | No        | Makes the checkbox a controlled component which can no longer be updated with `check`, `uncheck`, and `toggle` controls. |\n| defaultChecked | `boolean`                   | `undefined` | No        | Set this to `true` to make the checkbox `checked` by default.                                                            |\n| onChange       | `(checked: boolean) =\u003e any` | `undefined` | No        | Called each time the `checked` state changes.                                                                            |\n| children       | `React.ReactNode`           | `undefined` | No        | Your custom styled checkbox.                                                                                             |\n\n### \u0026lt;Checkmark\u0026gt;\n\nA convenient component for conditionally adding class names and styles when the component is checked/unchecked.\n\n#### Props\n\n| Prop           | Type                  | Default     | Required? | Description                                                                            |\n| -------------- | --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------- |\n| uncheckedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the checkbox is `unchecked`. |\n| checkedClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the checkbox is `checked`.   |\n| uncheckedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the checkbox is `unchecked`.    |\n| checkedStyle   | `React.CSSProperties` | `undefined` | No        | These styles name will be applied to the child element when the checkbox is `checked`. |\n| children       | `React.ReactNode`     | `undefined` | Yes       | The child you wish to render when the checkbox is checked.                             |\n\n### \u0026lt;Checked\u0026gt;\n\nThe child of this component will only render when the `\u003cCheckbox\u003e` is in\na `checked` state. It must be a child of a `\u003cCheckbox\u003e`.\n\n#### Props\n\n| Prop     | Type              | Default     | Required? | Description                                                |\n| -------- | ----------------- | ----------- | --------- | ---------------------------------------------------------- |\n| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the checkbox is checked. |\n\n### \u0026lt;Unchecked\u0026gt;\n\nThe child of this component will only render when the `\u003cCheckbox\u003e` is in\nan `unchecked` state. It must be a child of a `\u003cCheckbox\u003e`.\n\n#### Props\n\n| Prop     | Type              | Default     | Required? | Description                                                  |\n| -------- | ----------------- | ----------- | --------- | ------------------------------------------------------------ |\n| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the checkbox is unchecked. |\n\n### \u0026lt;Toggle\u0026gt;\n\nThis component clones its child and adds an `onClick` handler to toggle the `\u003cCheckbox\u003e` between\n`checked` and `unchecked` states. It must be a child of a `\u003cCheckbox\u003e`.\n\n#### Props\n\n| Prop     | Type              | Default     | Required? | Description                                                  |\n| -------- | ----------------- | ----------- | --------- | ------------------------------------------------------------ |\n| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the checkbox is unchecked. |\n\n### useCheckbox()\n\nA React hook that returns the [`CheckboxContextValue`](#checkboxcontextvalue) for the nearest `\u003cCheckbox\u003e` parent.\n\n### CheckboxContextValue\n\n```typescript\ninterface CheckboxContextValue {\n  // Does the checkbox have a `checked` property?\n  checked: boolean\n  // Is the checkbox currently focused?\n  focused: boolean\n  // Is the checkbox currently disabled?\n  disabled: boolean\n  // Checks the checkbox\n  check: () =\u003e void\n  // Unchecks the checkbox\n  uncheck: () =\u003e void\n  // Toggles the checkbox `checked` property\n  toggle: () =\u003e void\n}\n```\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccessible-ui%2Fcheckbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faccessible-ui%2Fcheckbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccessible-ui%2Fcheckbox/lists"}