Border Radius Variants

React Checkbox Pro provides various border radius options to match your design preferences.

Example

Available Radius Options

The following border radius variants are available:

• none - No border radius (0px)
• sm - Small border radius (2px)
• md - Medium border radius (4px) - Default
• lg - Large border radius (8px)
• full - Fully rounded corners (9999px)

Usage

// Basic usage
<Checkbox radius="lg">Large Radius</Checkbox>
 
// Combined with other props
<Checkbox 
  radius="full"
  color="primary"
  size="lg"
>
  Circular Checkbox
</Checkbox>

Customization

You can customize the border radius values by:

1. Modifying your Tailwind CSS configuration
2. Using CSS variables when not using Tailwind
3. Applying custom classes to override the default styles

Best Practices

1. Use consistent radius values across your application
2. Consider the checkbox size when choosing radius values
3. Match radius with your application's design system
4. Use medium radius as the default for most cases