Learn how to use React Checkbox Pro without Tailwind CSS using built-in CSS classes

Custom Styles

React Checkbox Pro provides built-in CSS classes for styling when you're not using Tailwind CSS. This allows you to use the component in any project, regardless of your styling setup.

Example

Custom CSS Checkbox

Usage

To use the built-in CSS classes instead of Tailwind CSS:

Set the isWithoutTailwind prop to true
Import the built-in CSS styles (optional if you want to use default styles)

import 'react-checkbox-pro/styles.css'; // Import built-in styles
import { Checkbox } from 'react-checkbox-pro';
 
function CustomCheckbox() {
  return (
    <Checkbox isWithoutTailwind>
      Custom Styled Checkbox
    </Checkbox>
  );
}

Available CSS Classes

The following CSS classes are available for customization:

/* Base Classes */
.checkbox-wrapper {}
.checkbox-input {}
.checkbox-label {}
.checkbox-icon {}
 
/* Size Variants */
.checkbox-xs {}
.checkbox-sm {}
.checkbox-md {}
.checkbox-lg {}
 
/* Color Variants */
.checkbox-default {}
.checkbox-primary {}
.checkbox-secondary {}
.checkbox-success {}
.checkbox-warning {}
.checkbox-danger {}
 
/* States */
.checkbox-disabled {}
.checkbox-checked {}
.checkbox-indeterminate {}
.checkbox-error {}
 
/* Label Placement */
.checkbox-label-left {}
.checkbox-label-right {}
.checkbox-label-top {}
.checkbox-label-bottom {}

Customizing Styles

You can override the default styles by targeting the built-in classes:

/* Custom styles */
.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
 
.checkbox-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.25rem;
  transition: all 0.2s;
}
 
.checkbox-input:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
 
.checkbox-label {
  font-size: 0.875rem;
  color: #1f2937;
}

With CSS-in-JS

You can also use the built-in classes with CSS-in-JS solutions:

import styled from 'styled-components';
import { Checkbox } from 'react-checkbox-pro';
 
const StyledCheckbox = styled(Checkbox)`
  &.checkbox-wrapper {
    /* Custom styles */
  }
 
  .checkbox-input {
    /* Custom input styles */
  }
 
  .checkbox-label {
    /* Custom label styles */
  }
`;
 
function CustomCheckbox() {
  return (
    <StyledCheckbox isWithoutTailwind>
      Styled Checkbox
    </StyledCheckbox>
  );
}

Best Practices

CSS Organization:
- Keep custom styles in a separate CSS file
- Use specific selectors to avoid conflicts
- Follow BEM or similar naming conventions
Responsive Design:
- Use media queries for different screen sizes
- Adjust sizes and spacing accordingly
- Maintain touch targets on mobile
Accessibility:
- Maintain sufficient color contrast
- Keep focus styles visible
- Ensure proper sizing for touch targets
Performance:
- Minimize CSS specificity
- Use efficient selectors
- Avoid unnecessary nesting

Color Variants

Learn about built-in color variants

Size Variants

Explore different size options

Custom Icons

Customize checkbox icons

Custom Styles

Color Variants

Size Variants

Custom Icons

On this page