Size Variants

React Checkbox Pro offers multiple size variants to fit different UI requirements.

Example

Available Sizes

The following size variants are available:

• xs - Extra small (12px)
• sm - Small (16px)
• md - Medium (20px) - Default
• lg - Large (24px)

Usage

// Basic usage with size
<Checkbox size="sm">Small Checkbox</Checkbox>
 
// Combined with other props
<Checkbox 
  size="lg"
  color="primary"
  checked={isChecked}
>
  Large Primary Checkbox
</Checkbox>

Best Practices

1. Use consistent sizes within the same form or section
2. Consider touch targets - larger sizes are better for mobile
3. Match size with surrounding UI elements
4. Use medium size as the default for most cases