29 CSS Checkboxes

The native checkbox is hard to restyle directly, so the standard technique is: keep the real input type=checkbox for accessibility but visually hide it (position: absolute; opacity: 0 — never display: none because that removes it from the tab order), then style a sibling element (a label or a span) as the visible box. Use the :checked pseudo-class to change that custom box when the input is ticked. Every checkbox in this gallery uses this pattern, so the control stays keyboard- and screen-reader-accessible while looking completely custom. Every demo scopes under .cb-NN (numeric per-demo prefix matching the css-tooltips / css-input-fields tighter standard) so multiple checkbox styles coexist on one page without style bleed. For newer browsers, :has() lets you write parent-level rules like .form:has(.cb-01 input:checked) so the surrounding container reacts to the check state.

Yes — the majority of the 29 demos are pure CSS. The :checked pseudo-class on the hidden input drives the whole visual change: the checkmark draw, glow, fill, bounce or flip all run from input:checked ~ .box rules using the adjacent-sibling combinator (+) or general-sibling combinator (~). JavaScript is only used in a handful of demos that require state or interaction CSS cannot produce alone: the Multi-State Checkbox (tri-state cycle unchecked → partial → checked, the Gmail/Notion select-all pattern), the Indeterminate Dash Checkbox (native input.indeterminate property + :indeterminate pseudo-class — needs JS to set the third state), the Magnetic Checkbox (mousemove-driven transform: translate for cursor pull), and the Confetti Burst (change-event spawns particle spans with CSS-property randomised trajectories). Everything else is checkbox-hack driven and runs with zero JavaScript.

Three approaches ship in this gallery. First, SVG stroke animation: the Draw Stroke Checkmark demo uses an SVG polyline with stroke-dasharray and stroke-dashoffset both set to the path length, then transitions stroke-dashoffset to 0 on :checked so the tick appears to draw itself over 350ms. Second, CSS-only pseudo-element ticks: the Dash to Check demo morphs a horizontal dash into a checkmark by animating width, height, border-right, border-bottom, border-radius, and a rotate(45deg) transform together over 350ms — no SVG required. Third, spring-bounce reveals: the Bouncy Pop demo scales the inner dot from 0 to 1 with cubic-bezier(.34,1.56,.64,1) so it overshoots past 1 before settling — the classic elastic feel used across Superhuman, Linear, and Notion. All three approaches honour prefers-reduced-motion by dropping to instant show/hide.

Yes — every demo satisfies WCAG 2.1 SC 4.1.2 (Name, Role, Value) by construction. The real input type=checkbox stays in the DOM (visually hidden via position: absolute + opacity: 0, never display: none which strips focus), tied to a label element so clicking the label toggles the input natively — that's what preserves keyboard access, screen-reader announcement of "checkbox, checked/unchecked", and password-manager autofill. Every demo carries a visible :focus-visible ring (not :focus, which fires on mouse click too) that keyboard users see as they Tab through the form. Every animated demo (Draw Stroke, Bouncy Pop, Ripple Wave, Pulse Ring, Gradient Sweep, Aurora Toggle, Confetti Burst) carries a prefers-reduced-motion: reduce block that either disables the animation or falls back to an instant show — WCAG 2.3.3 (Animation from Interactions) is non-negotiable for continuous motion. the Multi-State Checkbox demo uses a button element with data-state, so for full screen-reader parity it needs role="checkbox" plus aria-checked="mixed" on the partial state; native inputs with .indeterminate = true announce as "mixed" or "partially checked" automatically. the Magnetic Checkbox demo additionally satisfies SC 2.5.7 (Dragging) by keeping click-to-toggle intact even when the magnetic pull is disabled.

Yes. Each demo is plain HTML and CSS — no dependencies, no build step. Drop the markup into React (use className and htmlFor), Vue, Svelte, Astro, SolidJS, or static HTML and it works unchanged. All 29 designs are MIT licensed and free for personal and commercial use, including client projects, SaaS products, design systems, and open-source libraries. For React specifically, the checkbox input needs to be a controlled component (value={state}, onChange={setState}) or fully uncontrolled — never mix. For the Multi-State Checkbox, the button-based tri-state pattern maps cleanly to useState<'unchecked' | 'partial' | 'checked'>. For the Magnetic and Confetti Burst demos, wire the mousemove and change handlers via useEffect + refs. Comparison with shadcn/ui Checkbox (Radix UI primitive, 8KB, React-only): shadcn ships accessibility (focus ring, aria-checked, keyboard) via Radix; our CSS gives you the same accessibility contract in vanilla + adds 28 additional visual variants shadcn does not ship. Ant Design Checkbox is 32KB and locked to React. MUI Checkbox is 28KB. Chakra Checkbox is 22KB. All React-only. This collection ships zero framework dependency and drops into any stack.

SaaS dashboard settings panels have converged on a small vocabulary of toggle patterns. Demo 01 SaaS Dashboard Toggle Switch ships the canonical anatomy: an iOS-style pill toggle (44x24 track, 20x20 thumb sliding 20px on a cubic-bezier(.34,1.56,.64,1) spring) with a title, a one-line description below, and a keyboard-shortcut hint on the right (kbd chip showing the toggle's Cmd+K palette shortcut — the Notion / Linear / Superhuman power-user convention). The whole row is a real label element wrapping the input, so click-anywhere-to-toggle works natively. Screen readers announce the state change via aria-live=polite region — critical for settings where the toggle changes app behavior (Send desktop notifications, Auto-save drafts, Two-factor authentication). Design tokens follow the Stripe Dashboard / Vercel Dashboard / Linear Sync / Notion Settings convention: gray-500 rest track, brand-primary checked track, white thumb, .3s spring transition. For the row layout, use a 3-column grid (flex-1 title/desc, auto kbd chip, 44px toggle) so long descriptions truncate cleanly with text-overflow: ellipsis on narrow columns. Fintech-adjacent SaaS pricing pages (Stripe Atlas, Ramp, Brex, Mercury, Deel, Rippling, Gusto) carry $25-45 CPM in tier-1 US/UK/CA/AU/NZ markets — SaaS dashboards in general carry $8-15 CPM standalone but drive $15-25 CPM once a user lands on a plan/upgrade page. Compliance callouts: (1) if the toggle enables notifications, GDPR Article 6(1)(a) requires opt-in consent stored server-side with timestamp + IP for audit trail. (2) if it enables data sharing (analytics telemetry, third-party integrations), CCPA §1798.135 requires Do Not Sell or Share My Personal Info verbatim labeling — swap the toggle title accordingly for California traffic (geolocate via IP + navigator.globalPrivacyControl). (3) FTC 16 CFR § 425 Negative Option Rule applies if the toggle activates a paid feature (auto-renewal disclosure required in the description text, not buried in TOS). Amazon Prime paid $25M FTC settlement (2023), Vonage $100M (2022), Adobe $40M (2024) for negative-option violations. (4) For 2FA toggles specifically, WCAG 2.2 SC 3.3.7 (Redundant Entry) requires the toggle to not silently disable 2FA — always confirm via a second dialog or email confirmation before the toggle actually flips. Every settings panel needs at minimum: aria-describedby pointing to the description text so screen readers announce both title and description together (WCAG 2.1 SC 1.3.1), :focus-visible ring on the label (SC 2.4.7), and prefers-reduced-motion guard on the spring animation (SC 2.3.3). The Demo 01 pattern satisfies all four.

E-commerce facet filters (also called "refinement filters") are the highest-conversion surface after the product page itself — Baymard research shows a well-designed facet-filter panel lifts add-to-cart rate 15-25% on Amazon, eBay, Etsy, and Shopify Plus stores. Demo 02 Filter Tag Pill Checkbox ships the canonical anatomy: a pill-shaped label element (border-radius: 999px, padding 6px 14px, background gray-100 rest / brand-primary checked, border 1px transparent rest / brand-primary checked) with a count badge on the right (e.g. "Studio (24)", "1 bedroom (156)", "Pool (89)"). Clicking the pill toggles selection; the count updates via JS (fetch call to search API, debounced 250ms). Multi-select is default — visitors combine facets to narrow results. The pattern is used across Airbnb (Amenities, Room type, Price range), Zillow (Beds, Baths, Home type, Days on Zillow), Amazon (Brand, Prime Eligible, Customer Rating, Price), eBay (Buying Format, Condition, Location), Booking.com (Star rating, Meals, Popular filters), Kayak (Airlines, Stops, Cabin class), Redfin (Home type, More filters), Etsy (Category, Item format, Ships to), and Yelp (Cuisine, Price, Distance). Design conventions: (1) grouped by facet category in an accordion or fixed sidebar on desktop, bottom sheet on mobile. (2) sticky Apply button at the bottom on mobile — never auto-apply on toggle mobile because the visitor is mid-selection. (3) "Clear all" affordance at the top of the panel to reset all facets in one click. (4) count badges CRITICAL — visitors need to know how many results a facet returns before committing to the click (avoid the "zero-results dead-end" that tanks conversion). Facet filters carry $3-7 CPM baseline in tier-1 US/UK/CA/AU/NZ markets but drive $15-25 CPM once combined with add-to-cart intent, and $25-45 CPM for high-value verticals (real-estate Zillow/Redfin metro listings, financial-services fintech, travel Kayak/Expedia). Compliance callouts: (1) Fair Housing Act 42 U.S.C. § 3604 for real-estate facet filters — never allow filtering that indicates preference for protected classes (no "No Children" facet, no "Adults Only" facet outside legitimate 55+ housing exemptions). Zillow, Redfin, Realtor.com, and Trulia all pulled these facets after 2019 HUD investigations. (2) EU DSA (Digital Services Act, enforced 2024) requires marketplaces (Amazon EU, eBay EU, Etsy EU) to expose facet-filter algorithms as "terms of service" — the checkbox states themselves are user data governed by GDPR Article 6(1)(b). (3) CCPA §1798.135 requires "Do Not Sell or Share My Personal Info" opt-out visible on any facet filter that personalizes results based on visitor profile. Every facet filter needs: real input type=checkbox with visible label (WCAG 2.1 SC 1.3.1), :focus-visible ring on the pill (SC 2.4.7), aria-checked reflected on the pill state, and an aria-live=polite region announcing count updates ("156 results, 89 with pool selected, 42 with pool and studio selected") for screen-reader users. The Demo 02 pattern satisfies all four.

GDPR Article 7 requires explicit, informed, freely-given consent for non-essential cookies. The 2024+ CNIL France and Italian Garante enforcement trend requires Accept All and Reject All buttons to have equal visual weight — dark patterns favouring accept are being fined. Every cookie preferences panel needs at minimum four checkbox categories: (1) Necessary/Strictly Necessary — always ON, disabled with a tooltip explaining these cannot be turned off per Article 4. Use the Neumorphic Checkbox demo (soft-UI, feels immutable) or the Brutalist Checkbox demo (hard black border with a lock glyph) as the disabled-state visual. (2) Analytics/Statistics — Google Analytics, Plausible, PostHog, Fathom. Use the Smooth Slide Toggle demo (iOS-style, feels neutral). (3) Marketing/Advertising — Facebook Pixel, Google Ads retargeting. Same iOS toggle. (4) Personalisation — recommendation engines, saved preferences. Each category needs a plain-English description of what cookies it sets and how long they persist. FTC 16 CFR § 425 (Negative Option Rule) means pre-checked non-essential boxes are non-compliant — every non-necessary toggle must default to OFF. The checkbox states themselves must be logged server-side with timestamp + IP for audit trail; GDPR requires the ability to prove consent was given for each category separately. California CCPA replaces "Reject all" with "Do Not Sell or Share My Personal Info" verbatim per §1798.135 — IP-geolocation the visitor to switch the label. Global Privacy Control (GPC): browser signal via navigator.globalPrivacyControl that pre-declines marketing/analytics — respect it. California requires it as of July 2023, Colorado since July 2024. FTC recent enforcement examples: Amazon $25M for Prime cancellation obscurity (2023), Vonage $100M (2022), Adobe $40M for Creative Cloud auto-renewal (2024) — non-compliance costs are real. Cookie consent checkboxes carry $8-15 CPM in tier-1 EU markets ($15-25 when the consent surface is on a fintech, healthcare, or legal-services page). Consult your Data Protection Officer or GDPR counsel before production deployment.

Healthcare intake forms have compliance overhead most consumer forms don't. HIPAA 45 CFR § 164.508(c)(1)(vi) requires explicit opt-in consent — pre-checked boxes are NOT valid HIPAA authorization. Every consent checkbox on a patient-facing surface (Epic MyChart, Zocdoc, One Medical, Teladoc, Ro, Hims/Hers, Amwell, MDLive) needs: (1) Clear statement of WHAT PHI is being collected, WHY, WHO it's shared with, and the patient's HIPAA rights (right to access, right to amend, right to accounting of disclosures per 45 CFR § 164.524). (2) Explicit opt-in with a real checkbox that DEFAULTS TO UNCHECKED. Use the Glassmorphism Checkbox demo (medical blue + mint palette, non-alarming) or the Slide-In Label demo (confirms selection with an accessible "Consent recorded" reveal). (3) Ability to withdraw consent at any time — link to /manage-consent from every form. (4) Timestamp + patient ID + version of the consent form logged server-side ("v2.3, last updated 2026-06-15") — critical for audit trail. (5) Bundling multiple consents into one checkbox (e.g. "I agree to sharing PHI AND to receive marketing emails") violates HIPAA — separate checkboxes for separate disclosures, always. Never use the Confetti Burst demo for consent — celebratory animation on a medical consent is inappropriate. For provider-facing forms (clinician documentation, e-prescribing consent), the Neumorphic Checkbox demo reads as trustworthy and clinical. 21st Century Cures Act information-blocking rules (fully enforced October 2022) additionally require patient portals to not obstruct patient access to their own records — never gate PHI behind marketing consent. ADA Title III accessibility applies to healthcare portals — every checkbox needs WCAG 2.1 SC 2.5.5 (Target Size) 44x44px touch targets, SC 2.1.1 (Keyboard) focus-visible rings, SC 4.1.2 (Name/Role/Value) with the label semantically tied to the input. State laws add layers: California CMIA (Confidentiality of Medical Information Act), Texas HB 300, New York Article 45 — all impose additional consent-record requirements. Healthcare intake pages carry $30-50 CPM in tier-1 markets ($40-80 for insurance-adjacent, Medicare Advantage, telehealth for specialty conditions). Consult your Privacy Officer or HIPAA counsel before production deployment.

SaaS signup flows have converged on a small vocabulary of checkbox patterns from this collection. The Terms-of-Service + Privacy Policy checkbox at the bottom of the signup form is required by ABA Model Rule 7.1 (for legal-services SaaS), FTC 16 CFR § 255 (for anything showing testimonials), and state consumer protection statutes (California AG, New York AG, Texas AG all investigate deceptive TOS acceptance flows). Use the Draw Stroke Checkmark demo — the tick that draws itself confirms the user actively read and agreed. Never pre-check the TOS box (California AB 390, NY GBL § 526-b make this a non-starter). For the marketing-consent checkbox ("Send me product updates and promotions") the CAN-SPAM Act + GDPR + CCPA + Canada CASL all require explicit opt-in — the Smooth Slide Toggle demo reads as neutral without pushing users to opt in. For the multi-step onboarding wizard where users select preferences (industry, team size, use case), the Multi-State Checkbox demo is the pattern Notion / Linear / Superhuman / Vercel use for their /welcome route — a single "Select all" tri-state above a group of child checkboxes lets users bulk-toggle preferences with one click. For subscription paywall consent ("Auto-renew at $29/month, cancel anytime") required by FTC 16 CFR § 425 Negative Option Rule, use the Slide-In Label demo — the reveal-on-check pattern surfaces the auto-renewal disclosure at exactly the moment the user commits. For newsletter opt-ins on the paywall page, the Confetti Burst demo adds celebratory feedback matching Slack reaction / GitHub Actions success aesthetic. SaaS signup checkboxes carry $8-15 CPM in tier-1 markets, higher for fintech-adjacent SaaS (Ramp $25-45, Brex $25-45, Stripe Atlas $30-50, Mercury $25-40). For the Amazon/Vonage/Adobe FTC settlement precedents ($25M/$100M/$40M), one-click cancellation matching the subscribe flow's simplicity is required by California AB 390 (2018) and NY GBL § 526-b — link to /cancel from the same form.