How to Use Shadcn Checkbox in React & Next.js Projects

Checkboxes are one of the most commonly used form elements in modern web applications. They’re useful for settings pages, task managers, surveys, forms, and anywhere users need to select one or more options.

In this guide, you’ll learn how to create a simple Shadcn Checkbox component using React, Next.js, and Tailwind CSS. I’ll also show tha how to install the component into your own projects.

Basic Shadcn Checkbox

This Basic Shadcn Checkbox is a lightweight, accessible checkbox component built with React and Tailwind CSS. It provides a solid foundation for handling single-option selections and can be easily customized to match your application's design.

Install Shadcn Checkbox

The easiest way to add the Checkbox component is with the Shadcn CLI.

pnpm dlx shadcn@latest add checkbox

After installation, you can import the component and use it as either a controlled or uncontrolled checkbox using checked, onCheckedChange, or defaultChecked.

Manual Installation

If you prefer to create the component manually, install the required dependency:

bun add @base-ui/react

Then create the Checkbox component using the code below.

"use client"

import * as React from "react"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
      >
        <CheckIcon />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

Once the component is ready, you can reuse it anywhere in your application.

Checkbox with Sizes

Sometimes a single checkbox size isn’t enough. Small checkboxes work well in tables, while larger ones are easier to tap on mobile devices.

This Checkbox with Sizes component provides multiple size options that can be customized with Tailwind CSS.

Install with CLI

npx shadcn@latest add @shadcn-space/checkbox-01

Manual Installation

Or create it manually using the following code.

import { Checkbox } from '@/components/ui/checkbox'

const CheckboxSizesDemo = () => {
  return (
    <div className='flex items-center gap-2'>
      <Checkbox defaultChecked aria-label='Size default' className='cursor-pointer' />
      <Checkbox className='size-5 cursor-pointer' defaultChecked aria-label='Size small' />
      <Checkbox className='size-6 cursor-pointer' defaultChecked aria-label='Size large' />
    </div>
  )
}

export default CheckboxSizesDemo

This example shows how to build three checkbox sizes using the same reusable component.

Why use different checkbox sizes?

• Small, medium, and large size options

• Better experience on mobile devices

• Easy to customize with Tailwind CSS

• Works well across different layouts

• Keeps your interface visually consistent

Best for: Responsive dashboards, mobile apps, admin panels, and data tables.

Why Use Shadcn Checkbox?

Shadcn Checkbox components are simple, flexible, and easy to integrate into React applications. They help you build consistent user interfaces without writing everything from scratch.

Some of the benefits include:

• Built with React, Next.js, and Tailwind CSS

• Accessible and keyboard-friendly

• Easy to customize with Tailwind classes

• Works with controlled and uncontrolled state

• Integrates well with React Hook Form and Zod

• Lightweight and production-ready

Where Can You Use These Components?

These checkbox components are useful for many types of applications, including:

• Forms

• Settings pages

• User preferences

• Admin dashboards

• SaaS products

• Task management apps

• Survey forms

• Modern React and Next.js applications

Conclusion

Building reusable checkbox components helps you create better user experiences while saving development time.

Whether you need a simple checkbox or different size variants, these components are easy to customize and fit into almost any React or Next.js project.

Feel free to copy the examples, customize them to match your design system, and use them in your own applications.

In the next guide, we’ll explore how to build reusable Shadcn Dialog Components with practical examples and ready-to-use code.