Modern Checkbox Documentation

A comprehensive collection of beautiful, accessible, and customizable checkbox and radio button styles for modern web applications.

Version 2.0 - Updated with new advanced styles, animations, and better accessibility support.

Beautiful Designs

50+ stunning checkbox and radio button styles

Fully Responsive

Works perfectly on all devices and screen sizes

Accessible

WCAG 2.1 compliant with proper ARIA labels

Pure CSS

No JavaScript required for most styles

Installation

Get started with our checkbox library in just a few simple steps.

Step 1: Include CSS Files

Add the following CSS files to your HTML <head> section:

HTML

<!-- Bootstrap 5 (Optional) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Checkbox Styles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/toggleswitch.css">
<link rel="stylesheet" href="css/Update.css">

Step 2: Add HTML Markup

Use the following HTML structure for your checkboxes:

HTML

<div class="checkbox-3d">
    <input type="checkbox" id="myCheckbox" checked>
    <label class="checkbox-3d-label" for="myCheckbox">
        <div class="checkbox-3d-box"></div>
        Enable 3D Effects
    </label>
</div>

That's it! Your checkbox is now ready to use with beautiful styling.

Quick Start Guide

Here are some quick examples to get you started immediately:

Basic Checkbox

Default checkbox style

HTML

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="quickCheck1" checked>
    <label class="form-check-label" for="quickCheck1">
        Default checkbox style
    </label>
</div>

Toggle Switch

Important: Always use unique IDs for your form elements to ensure proper label associations.

Checkbox Styles Popular

Our library includes multiple checkbox styles for different use cases:

Available Styles

Style Name	Class Name	Features
3D Neumorphic	`checkbox-3d`	Shadow effects, pressed states
Neon Glow	`neon-checkbox`	Glowing animations, pulse effect
Flip Card	`flip-checkbox`	3D rotation, dual faces
Animated SVG	`normal_chebox_svg`	SVG paths, smooth animations
Tooltip Style	`tooltip_chebox_button`	Hover tooltips, 4 positions

Radio Buttons

Beautiful radio button styles that match your checkboxes perfectly.

Radio Pills

Modern pill-shaped radio buttons with gradient effects:

HTML

<div class="radio-pill">
    <input type="radio" name="plan" id="plan1" checked>
    <label class="radio-pill-label" for="plan1">
        <i class="fas fa-star"></i> Basic
    </label>
</div>

Radio Cards

Large, interactive card-style radio buttons perfect for selections:

Click on the cards to select an option

Advanced Styles New

Explore our cutting-edge checkbox and radio button designs:

Advanced Toggles Flip Cards Neon Effects Star Rating

Visit our New Advanced Styles page to see all these effects in action!

Color Customization

Easily customize colors using CSS variables:

CSS

:root {
    --primary-color: #4F46E5;
    --success-color: #10B981;
    --danger-color: #EF4444;
    --warning-color: #F59E0B;
    --info-color: #3B82F6;
}

Size Variations

Available size classes:

Size	Class	Dimensions
Small	`toggleSwitch-sm`	20px × 20px
Medium	`toggleSwitch-md`	28px × 28px
Large	`toggleSwitch-lg`	40px × 40px

Best Practices

1. Always Use Labels

Ensure every checkbox/radio has an associated <label> for accessibility.

2. Unique IDs

Use unique IDs for each form element to prevent conflicts.

3. Keyboard Navigation

All our styles support keyboard navigation out of the box.

4. Color Contrast

Maintain WCAG 2.1 AA contrast ratios for text and interactive elements.

Following these practices ensures your forms are accessible to all users!

Frequently Asked Questions

Do I need JavaScript?

No! Most of our styles are pure CSS. JavaScript is only needed for copy buttons and advanced features.

Is it compatible with Bootstrap?

Yes! Works with Bootstrap 3, 4, and 5.

Can I use this commercially?

Please check the license file included with your purchase.

How do I customize colors?

Override the CSS variables in your own stylesheet or modify the source files directly.