The shadcn checkbox component is a fully accessible, unstyled primitive built on Radix UI's Checkbox, composable enough to power everything from a simple form field to animated to-do lists and card-based selection UIs. This guide covers 12 production-ready variants below, with full code for each. Six use animation via Framer Motion or CSS keyframes, and six push the layout and composition of the checkbox into genuinely useful UI patterns.
The checkbox is one building block among many. Browse the full shadcn components directory for guides to every shadcn/ui primitive.
What is the shadcn checkbox component and how does it work?
The shadcn Checkbox wraps @radix-ui/react-checkbox and ships with a pre-wired indicator, keyboard navigation, and ARIA attributes out of the box. It renders a <button role="checkbox"> with a nested CheckIcon from lucide-react. You own the styling, with Tailwind classes applied directly to the component primitives.
Installation
Install it with one command:
The base component lives at components/ui/checkbox.tsx and exports a single Checkbox primitive. The latest canary version ships with base-ui compatibility, so the underlying primitives are lighter and tree-shakeable. For the full story on why shadcn/ui is moving from Radix to Base UI, read our Radix vs Base UI comparison.
Basic usage with a label:
That is the floor. The rest of this post shows how far above it you can build.
12 shadcn checkbox variants you can build today
These 12 variants cover layout, composition, and animation. All build on the same Checkbox primitive, or drop down to @radix-ui/react-checkbox directly when a variant needs a custom indicator.
1. Default shadcn Checkbox (baseline)
The unstyled default is already polished. Radix handles focus-visible rings, disabled states, and indeterminate state. This is what you get without any customisation.
When to use it: Standard form fields, preference toggles, filter panels.
2. Custom Positioned Checkbox (label above, description below)
Move the label above and add a supporting description below. This layout suits settings pages where each option needs context.
Receive updates about new templates and promotions.
Get notified about sign-ins from new devices.
When to use it: Notification preferences, settings panels, GDPR consent flows.
🧩 Grouping options into panels? The shadcn card component guide shows how to wrap related checkboxes in a contained, elevated surface, which pairs well with the descriptive layout above.
3. Card Checkbox Group with Icons
Wrap each option in a bordered card. The whole card becomes the click target. Icons reinforce each option visually.
When to use it: Pricing tier selection, feature toggles, plan comparison pages.
4. Avatar-Based Card Checkbox
Useful for team member selection or assigning permissions. Each card shows an avatar and a role badge. This builds on the same shadcn avatar component used elsewhere in the UI.
When to use it: Team member selection, permission management, invite flows.
5. Checkbox Group with Badge Counter
Show a live count of selected items next to the group heading. Useful in filter panels where users need to track how many filters are active.
Tech Stack
When to use it: Sidebar filters, tag selection, multi-faceted search pages.
6. Select-All Parent Checkbox (Indeterminate State)
The indeterminate state is one of the most underused features of the Radix checkbox. Use it for "select all" patterns.
When to use it: Data tables with bulk actions, task lists, file managers.
7. Animated Checkbox (Framer Motion spring check)
The first of six animated shadcn checkbox variants. This one replaces the default CheckIcon with a hand-drawn SVG path that animates in via Framer Motion's pathLength spring.
Key detail: forceMount on the Indicator keeps the element in the DOM so Framer Motion can animate the exit. Without it, AnimatePresence cannot run the exit animation.
8. Animated To-Do List
A to-do list where completed items strike through with a CSS transition and the checkbox scales in on check. This uses CSS keyframes for the strikethrough and Framer Motion for the checkbox scale.
Today's tasks
0 of 5 completed
When to use it: Onboarding checklists, project setup guides, feature comparison tables with user tracking.
9. Confetti Burst Checkbox (CSS keyframe animation)
When checked, tiny CSS-animated dots burst outward from the checkbox centre, a micro-delight moment. No Framer Motion dependency here; pure CSS keyframes via Tailwind's arbitrary value support.
Add the burst keyframes to your globals.css:
When to use it: Goal completion moments, achievement unlocks, subscription confirmations.
10. Animated Flip Checkbox (3D CSS transform)
A checkbox that flips on its Y axis when checked, revealing the tick on the back face. Pure CSS transforms, no extra dependencies.
When to use it: Confirmation dialogs, acknowledge flows, terms acceptance, anywhere a moment of ceremony suits the action.
11. Framer Motion Morphing Checkbox
The box border morphs into a circle when checked. The check icon fades in with a stagger delay. Uses motion layout animations.
Key detail: asChild on the Radix Root passes all accessibility attributes onto the Framer Motion button. The scale: [1, 1.15, 1] keyframe on check gives a satisfying "pop" without needing a separate spring.
12. Glow Pulse Checkbox (CSS animation, dark-mode optimised)
A checkbox that pulses a coloured glow when checked. Works best on dark backgrounds. Uses a CSS @keyframes glow-pulse animation applied via inline style.
Add the glow-pulse keyframes to your globals.css:
When to use it: Feature flags, premium feature toggles, "beta" opt-ins on dark dashboards.
All 12 variants at a glance
| # | Variant | Animation | Use case | Dependency |
|---|---|---|---|---|
| 1 | Default | None | Forms, filters | None |
| 2 | Custom positioned | None | Settings, GDPR | None |
| 3 | Card with icons | Hover | Plan selection | None |
| 4 | Avatar card | Hover | Team selection | shadcn Avatar |
| 5 | Badge counter | None | Filter panels | shadcn Badge |
| 6 | Indeterminate / select-all | None | Data tables | None |
| 7 | Spring check path | Framer Motion | CTAs, sign-ups | framer-motion |
| 8 | Animated to-do list | Framer Motion | Onboarding | framer-motion |
| 9 | Confetti burst | CSS keyframes | Goal moments | None |
| 10 | 3D flip | CSS transform | Confirmations | None |
| 11 | Morphing border | Framer Motion | Premium UI | framer-motion |
| 12 | Glow pulse | CSS keyframes | Dark dashboards | None |
How to install Framer Motion alongside shadcn/ui
The animated variants (7, 8, 11) depend on Framer Motion. Install it once:
Framer Motion and shadcn/ui have no version conflicts as of mid-2026. The motion components are tree-shaken at build time, so only the variants you actually use contribute to bundle size. A typical motion.div with one animate prop adds roughly 45 kB to your bundle (gzipped: about 16 kB).
Accessibility notes for every variant
Every variant above keeps accessibility intact. Here is what each one handles:
- Keyboard: All variants use
CheckboxPrimitive.Rootfrom Radix, which is a native<button>. Space toggles it. Tab focuses it. No extraonKeyDownneeded. - Screen readers:
aria-checkedis set by Radix automatically, including the"mixed"value for the indeterminate state (Variant 6). - Reduced motion: The Framer Motion variants respect
prefers-reduced-motionwhen you wrap them withuseReducedMotion. - Focus rings: Every variant passes
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2through to the root element. Never remove these.
🎨 Want these checkboxes to match your brand instantly? The free shadcn theme generator lets you preview colors, radius, and font scale live, so every variant above inherits your palette without touching code.
Frequently Asked Questions
Build faster with a ready-made shadcn/ui template
Building these components from scratch is satisfying. But if you need a full landing page, hero, pricing, FAQ, dark mode, already wired up and production-ready, ShadcnDeck's shadcn/ui landing page templates save you days of setup.
Browse the free shadcn/ui templates to see what is available at no cost, or explore the full template catalogue for premium options with advanced sections and priority support.
Related Posts
Explore more shadcn component guides:
