{"id":11629,"library":"rc-checkbox","title":"React Checkbox Component","description":"rc-checkbox is a foundational, unstyled React UI component that provides a customizable checkbox input. It aims to offer a robust and accessible base for building more elaborate checkbox UIs. The current stable version is 3.5.0. While active development for this component has effectively transitioned to the `@rc-component/checkbox` namespace, `rc-checkbox` version 3.5.0 remains available on npm. Its release cadence was moderate, with a significant rewrite to TypeScript in v3.0.0, and it differentiates itself by offering a simple, highly composable core component without imposing specific styling frameworks. Users seeking the latest features and ongoing maintenance should consider migrating to the `@rc-component/checkbox` package.","status":"renamed","version":"3.5.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/checkbox","tags":["javascript","react","react-component","react-checkbox","checkbox","typescript"],"install":[{"cmd":"npm install rc-checkbox","lang":"bash","label":"npm"},{"cmd":"yarn add rc-checkbox","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-checkbox","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The component is exported as a default export, requiring direct import without curly braces.","wrong":"import { Checkbox } from 'rc-checkbox';","symbol":"Checkbox","correct":"import Checkbox from 'rc-checkbox';"},{"note":"Type definitions are provided for TypeScript users. Use `import type` to avoid bundling unnecessary runtime code.","symbol":"CheckboxProps","correct":"import type { CheckboxProps } from 'rc-checkbox';"},{"note":"For CommonJS environments, the component is imported via `require`.","symbol":"Checkbox (CommonJS)","correct":"const Checkbox = require('rc-checkbox');"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport Checkbox from 'rc-checkbox';\nimport 'rc-checkbox/assets/index.css'; // Don't forget to import the default styles if needed\n\nconst MyCheckboxComponent = () => {\n  const [isChecked, setIsChecked] = useState(false);\n\n  const handleChange = (e) => {\n    setIsChecked(e.target.checked);\n    console.log('Checkbox changed:', e.target.checked);\n  };\n\n  return (\n    <div>\n      <label>\n        <Checkbox\n          checked={isChecked}\n          onChange={handleChange}\n          name=\"myAwesomeCheckbox\"\n          id=\"my-awesome-checkbox\"\n        />\n        <span>{isChecked ? 'Checked' : 'Unchecked'}</span>\n      </label>\n      <br />\n      <label>\n        <Checkbox defaultChecked disabled />\n        <span>Disabled and Checked</span>\n      </label>\n      <br />\n      <label>\n        <Checkbox disabled />\n        <span>Disabled and Unchecked</span>\n      </label>\n    </div>\n  );\n};\n\nexport default MyCheckboxComponent;","lang":"typescript","description":"This quickstart demonstrates how to import and use the `rc-checkbox` component, managing its checked state and handling changes. It also shows examples of disabled checkboxes and the necessary CSS import."},"warnings":[{"fix":"Review the component's API documentation for updated prop types and usage patterns. Ensure your TypeScript setup correctly resolves the new type definitions.","message":"`rc-checkbox` v3.0.0 introduced a full rewrite in TypeScript. This may lead to changes in prop interfaces, internal component behavior, and requires TypeScript users to update their type imports and usage.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If accessibility is critical, review the specific a11y features that were reverted and consider implementing alternative solutions or custom a11y attributes until the feature is re-introduced or improved in the successor package.","message":"In `rc-checkbox` v3.5.0, a previously introduced accessibility improvement (feat: improve a11y #292) was reverted. This might impact users relying on those specific accessibility enhancements, potentially causing regressions in assistive technology support or keyboard navigation.","severity":"breaking","affected_versions":"3.5.0"},{"fix":"Update your package dependencies from `rc-checkbox` to `@rc-component/checkbox`. Review the changelog for `@rc-component/checkbox` for any breaking changes introduced since `rc-checkbox@3.5.0` (e.g., DOM structure changes in `@rc-component/checkbox@2.0.0` requiring style adjustments).","message":"The `rc-checkbox` package is functionally superseded by `@rc-component/checkbox`. While `rc-checkbox@3.5.0` is the last version under this name, all future development, breaking changes (e.g., DOM structure changes in `@rc-component/checkbox@2.0.0`), and new features will occur in the `@rc-component/checkbox` package. Users are strongly encouraged to migrate.","severity":"gotcha","affected_versions":">=3.5.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import { Checkbox } from 'rc-checkbox';` to `import Checkbox from 'rc-checkbox';`.","cause":"Attempting to import `Checkbox` as a named export when it is a default export.","error":"TypeError: (0 , _rc_checkbox__WEBPACK_IMPORTED_MODULE_0__.default) is not a function"},{"fix":"Consult the `rc-checkbox` (or `@rc-component/checkbox`) API documentation to verify valid props. If you're on v3.0.0+, ensure your code adheres to the new TypeScript interfaces.","cause":"Using a prop that either does not exist on `CheckboxProps` or was removed/renamed during the v3.0.0 TypeScript rewrite.","error":"Property 'someProp' does not exist on type 'IntrinsicAttributes & CheckboxProps'."},{"fix":"Verify that `import Checkbox from 'rc-checkbox';` is correctly placed and that `rc-checkbox` is properly installed in your `node_modules`.","cause":"This error often indicates that the component `Checkbox` was not correctly imported or resolved, resulting in `undefined` being passed where a React component was expected.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."}],"ecosystem":"npm"}