DEV Community

Cover image for Getting Started with Shadcn Checkbox in React & Next.js
Sanjay Joshi
Sanjay Joshi

Posted on

Getting Started with Shadcn Checkbox in React & Next.js

#shadcn #react #nextjs #webdev

A checkbox is a simple component, but it's an important part of many applications. This guide shows you how to install and use the Checkbox component in React and Next.js.

You'll also discover ready-to-use open source shadcn checkbox examples
that you can copy, customize, and use in real projects.

Install Shadcn Checkbox

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

pnpm dlx shadcn@latest add checkbox
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

Shadcn Official 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Shadcn Checkbox with Multiple Sizes

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.

Additional Shadcn Checkbox Resources

Check out my collection of 16 Open Source Shadcn Checkbox Components that you can copy, customize, and use in your React & Next.js projects.

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

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

Searching for More Shadcn Checkbox Components?

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

Top comments (0)