Checkbox Primitive

The CheckboxPrimitive component is a low-level checkbox component that handles all the core functionality. It's useful when you need more control over the styling and behavior of the checkbox.

Basic Usage

import { CheckboxPrimitive } from 'react-checkbox-pro';
 
function CustomCheckbox() {
  const [checked, setChecked] = useState(false);
 
  return (
    <CheckboxPrimitive
      checked={checked}
      onChange={setChecked}
    >
      Custom Checkbox
    </CheckboxPrimitive>
  );
}

Features

• Controlled & uncontrolled modes
• Indeterminate state support
• Keyboard shortcuts
• Custom icons
• Error states & helper text
• Label placement options
• Accessible by default

Props

Examples

Custom Styling

<CheckboxPrimitive
  className="custom-checkbox"
  wrapperClassName="checkbox-wrapper"
  labelClassName="checkbox-label"
  iconClassName="checkbox-icon"
>
  Custom Styled Checkbox
</CheckboxPrimitive>

With Render Function

<CheckboxPrimitive>
  {({ checked, onChange }) => (
    <div className="custom-layout">
      <span>{checked ? 'Selected' : 'Not Selected'}</span>
      <button onClick={() => onChange(!checked)}>
        Toggle
      </button>
    </div>
  )}
</CheckboxPrimitive>

With Custom Icons

<CheckboxPrimitive
  icon={<CustomIcon />}
  checkedIcon={<CustomCheckedIcon />}
  indeterminateIcon={<CustomIndeterminateIcon />}
>
  Custom Icons
</CheckboxPrimitive>

Best Practices

1. Component Structure:

   • Keep styling separate from logic
   • Use semantic HTML elements
   • Maintain proper ARIA attributes

2. State Management:

   • Choose between controlled and uncontrolled based on needs
   • Handle state changes efficiently
   • Consider using context for complex state

3. Customization:

   • Use className props for styling
   • Implement custom icons consistently
   • Maintain accessibility when customizing

4. Performance:

   • Memoize callbacks when needed
   • Avoid unnecessary re-renders
   • Use render functions judiciously

Use Cases

The CheckboxPrimitive component is ideal when you need:

1. Complete control over styling
2. Custom layout or structure
3. Integration with design systems
4. Complex state management
5. Custom interaction patterns

Related Components

• Checkbox - High-level component with built-in styling
• CheckboxGroup - For managing multiple checkboxes
• useCheckbox - Hook for custom implementations