Color Variants

React Checkbox Pro comes with several color variants to match your application's design system.

Example

Available Colors

The following color variants are available:

• default - Gray color scheme
• primary - Primary brand color
• secondary - Secondary brand color
• success - Green color for success states
• warning - Yellow/Orange color for warning states
• danger - Red color for error/danger states

Usage

// Basic usage
<Checkbox color="primary">Primary Checkbox</Checkbox>
 
// With other props
<Checkbox 
  color="success"
  checked={isChecked}
  onChange={handleChange}
>
  Success Checkbox
</Checkbox>

Customization

You can customize the colors by modifying your Tailwind CSS configuration or using CSS variables when using the component without Tailwind.