Using Shadcn Checkbox in React & Next.js Step-by-Step Guide

Question

If you're building a React and Next.js application, you'll probably need checkboxes for forms, settings, surveys, or task management features.

In this tutorial, we'll learn how to install and customize the Shadcn Checkbox component.

You'll also get practical shadcn checkbox with code examples that are production-ready and easy to integrate into your projects.

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.

Our 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

---

Searching for More Shadcn Checkbox Components?

Discover more Shadcn Checkbox Components, including Sizes, Vertical Group, Colors, Todo List, List Group, Form, Custom Icons, Dashed Border, Tree, and Avatar & Group.