rc-checkbox

library3.5.0jsnpmunverified

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.

web-framework

npm install rc-checkbox

github ↗package ↗

INSTALL

IMPORT

SIG · RC-CHECKBOX

rc-checkbox

web-frameworkjavascriptv3.5.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Checkbox

✓ import Checkbox from 'rc-checkbox';

✗ import { Checkbox } from 'rc-checkbox';

The component is exported as a default export, requiring direct import without curly braces.

CheckboxProps

✓ import type { CheckboxProps } from 'rc-checkbox';

Type definitions are provided for TypeScript users. Use `import type` to avoid bundling unnecessary runtime code.

Checkbox (CommonJS)

✓ const Checkbox = require('rc-checkbox');

For CommonJS environments, the component is imported via `require`.

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.

import React, { useState } from 'react'; import Checkbox from 'rc-checkbox'; import 'rc-checkbox/assets/index.css'; // Don't forget to import the default styles if needed const MyCheckboxComponent = () => { const [isChecked, setIsChecked] = useState(false); const handleChange = (e) => { setIsChecked(e.target.checked); console.log('Checkbox changed:', e.target.checked); }; return ( <div> <label> <Checkbox checked={isChecked} onChange={handleChange} name="myAwesomeCheckbox" id="my-awesome-checkbox" /> <span>{isChecked ? 'Checked' : 'Unchecked'}</span> </label> <br /> <label> <Checkbox defaultChecked disabled /> <span>Disabled and Checked</span> </label> <br /> <label> <Checkbox disabled /> <span>Disabled and Unchecked</span> </label> </div> ); }; export default MyCheckboxComponent;

Debug

Known issues

breaking`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.

fix

Review the component's API documentation for updated prop types and usage patterns. Ensure your TypeScript setup correctly resolves the new type definitions.

affects: >=3.0.0

breakingIn `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.

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.

affects: 3.5.0

gotchaThe `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.

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).

affects: >=3.5.0

Errors

Common errors & fixes

TypeError: (0 , _rc_checkbox__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

Attempting to import `Checkbox` as a named export when it is a default export.

fix

Change your import statement from `import { Checkbox } from 'rc-checkbox';` to `import Checkbox from 'rc-checkbox';`.

Property 'someProp' does not exist on type 'IntrinsicAttributes & CheckboxProps'.

Using a prop that either does not exist on `CheckboxProps` or was removed/renamed during the v3.0.0 TypeScript rewrite.

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.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

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.

fix

Verify that `import Checkbox from 'rc-checkbox';` is correctly placed and that `rc-checkbox` is properly installed in your `node_modules`.

Upgrade

Version history

3.5.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/checkbox ↗

packagehttps://www.npmjs.com/package/rc-checkbox ↗