CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rc-checkbox

checkbox ui component for react

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

RC Checkbox

RC Checkbox is a flexible, customizable checkbox UI component for React applications. It provides a comprehensive checkbox implementation with support for controlled and uncontrolled modes, custom styling, event handling, and accessibility features. The component offers three-state logic support (unchecked, checked, indeterminate) and can also function as a radio button.

Package Information

  • Package Name: rc-checkbox
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install rc-checkbox

Core Imports

import Checkbox from "rc-checkbox";

For TypeScript types:

import Checkbox, { type CheckboxProps, type CheckboxRef, type CheckboxChangeEvent } from "rc-checkbox";

CommonJS:

const Checkbox = require("rc-checkbox");

Basic Usage

import React, { useState } from "react";
import Checkbox from "rc-checkbox";

function App() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}

Capabilities

Main Component

The primary checkbox component with full TypeScript support and React forwardRef capabilities.

const Checkbox: React.ForwardRefExoticComponent<
  CheckboxProps & React.RefAttributes<CheckboxRef>
>;

Checkbox Props

Configuration interface for the checkbox component, extending HTML input attributes.

interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
  /** CSS class prefix for styling (default: 'rc-checkbox') */
  prefixCls?: string;
  /** Custom change event handler with enhanced event object */
  onChange?: (e: CheckboxChangeEvent) => void;
}

Event Handling

Custom event object providing additional control over event behavior.

interface CheckboxChangeEvent {
  /** Enhanced target object with checkbox props and state */
  target: CheckboxChangeEventTarget;
  /** Stop event bubbling to parent elements */
  stopPropagation: () => void;
  /** Prevent default browser behavior */
  preventDefault: () => void;
  /** Original native change event */
  nativeEvent: React.ChangeEvent<HTMLInputElement>['nativeEvent'];
}

interface CheckboxChangeEventTarget extends CheckboxProps {
  /** Current checked state */
  checked: boolean;
}

Imperative API

Ref interface for programmatic control of the checkbox.

interface CheckboxRef {
  /** Focus the checkbox input with optional focus options */
  focus: (options?: FocusOptions) => void;
  /** Remove focus from the checkbox input */
  blur: () => void;
  /** Direct access to the underlying input element */
  input: HTMLInputElement | null;
  /** Access to the wrapper span element */
  nativeElement: HTMLElement | null;
}

Supported Props

Checkbox-Specific Props

  • prefixCls?: string - CSS class prefix for custom styling (default: 'rc-checkbox')
  • onChange?: (e: CheckboxChangeEvent) => void - Enhanced change event handler

Standard HTML Input Props

  • checked?: boolean - Controlled checked state
  • defaultChecked?: boolean - Initial checked state for uncontrolled mode (default: false)
  • disabled?: boolean - Disable the checkbox
  • name?: string - Form field name
  • value?: string | number - Form field value
  • className?: string - Additional CSS classes
  • style?: React.CSSProperties - Inline styles
  • title?: string - Tooltip text displayed on wrapper element
  • type?: string - Input type (default: 'checkbox', can be 'radio')
  • autoFocus?: boolean - Auto focus on component mount
  • required?: boolean - Required field validation
  • tabIndex?: number - Tab navigation order
  • id?: string - Unique element identifier
  • onFocus?: React.FocusEventHandler<HTMLInputElement> - Focus event handler
  • onBlur?: React.FocusEventHandler<HTMLInputElement> - Blur event handler
  • onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> - Key down event handler
  • onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> - Key press event handler
  • onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> - Key up event handler

Accessibility & Data Attributes

  • data-* attributes - Custom data attributes passed to input
  • aria-* attributes - Accessibility attributes passed to input
  • role?: string - ARIA role attribute

Usage Examples

Controlled Mode

import React, { useState } from "react";
import Checkbox from "rc-checkbox";

function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => {
        setChecked(e.target.checked);
        console.log('Checkbox is now:', e.target.checked);
      }}
    />
  );
}

Uncontrolled Mode

import React from "react";
import Checkbox from "rc-checkbox";

function UncontrolledCheckbox() {
  return (
    <Checkbox
      defaultChecked={false}
      onChange={(e) => {
        console.log('Checkbox changed to:', e.target.checked);
      }}
    />
  );
}

With Custom Styling

import React from "react";
import Checkbox from "rc-checkbox";
import "rc-checkbox/assets/index.css"; // Default styles

function StyledCheckbox() {
  return (
    <Checkbox
      prefixCls="my-checkbox"
      className="custom-checkbox"
      style={{ margin: '10px' }}
      onChange={(e) => console.log(e.target.checked)}
    />
  );
}

As Radio Button

import React, { useState } from "react";
import Checkbox from "rc-checkbox";

function RadioGroup() {
  const [selected, setSelected] = useState('option1');

  return (
    <div>
      <Checkbox
        type="radio"
        name="options"
        value="option1"
        checked={selected === 'option1'}
        onChange={(e) => setSelected(e.target.value)}
      />
      <Checkbox
        type="radio"
        name="options"
        value="option2"
        checked={selected === 'option2'}
        onChange={(e) => setSelected(e.target.value)}
      />
    </div>
  );
}

Using Ref for Imperative Control

import React, { useRef } from "react";
import Checkbox, { type CheckboxRef } from "rc-checkbox";

function RefExample() {
  const checkboxRef = useRef<CheckboxRef>(null);

  const focusCheckbox = () => {
    checkboxRef.current?.focus();
  };

  const blurCheckbox = () => {
    checkboxRef.current?.blur();
  };

  return (
    <div>
      <Checkbox ref={checkboxRef} />
      <button onClick={focusCheckbox}>Focus Checkbox</button>
      <button onClick={blurCheckbox}>Blur Checkbox</button>
    </div>
  );
}

Advanced Event Handling

import React from "react";
import Checkbox from "rc-checkbox";

function AdvancedEventHandling() {
  const handleChange = (e) => {
    // Prevent the change from bubbling up
    e.stopPropagation();
    
    // Access all checkbox props and state
    console.log('Target props:', e.target);
    console.log('Checked state:', e.target.checked);
    console.log('Native event:', e.nativeEvent);
  };

  return (
    <div onClick={() => console.log('Div clicked')}>
      <Checkbox onChange={handleChange} />
    </div>
  );
}

CSS Classes

The component generates the following CSS classes for styling:

  • rc-checkbox - Base wrapper class (or custom prefixCls)
  • rc-checkbox-checked - Applied when checked state is true
  • rc-checkbox-disabled - Applied when disabled prop is true
  • rc-checkbox-input - Applied to the input element
  • rc-checkbox-inner - Applied to the inner visual element

Browser Compatibility

  • IE11, Edge
  • Firefox (last 2 versions)
  • Chrome (last 2 versions)
  • Safari (last 2 versions)
  • Electron (last 2 versions)

Dependencies

  • classnames - CSS class management utility
  • rc-util - Utilities including useMergedState hook
  • React 16.9+ - Peer dependency

Install with Tessl CLI

npx tessl i tessl/npm-rc-checkbox
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rc-checkbox@3.5.x
Publish Source
CLI
Badge
tessl/npm-rc-checkbox badge