Shadcn Checkbox

React checkbox component with three states and form integration. Built with TypeScript and Tailwind CSS for Next.js applications using Radix UI primitives.

Checkbox state issues?

Join our Discord community for help from other developers.

Ever seen users frantically click a checkbox that doesn't respond? Or watch them struggle with terms and conditions they can't actually check? Yeah, checkboxes seem simple until they're not. This shadcn/ui checkbox actually responds when clicked and works the way users expect.

Checkbox showcase

Three states that actually work:

Loading component...

Built on Radix UI primitives with proper TypeScript types and ARIA attributes. Styled with Tailwind CSS so it matches your design system instead of browser defaults that look like they're from 1995.

npx shadcn@latest add checkbox

Why checkboxes actually handle selections

Here's the thing—checkboxes are everywhere, but most of them suck. They're too small to hit on mobile, they don't show focus states, they break when you try to style them, or they just don't respond consistently. Users expect checkboxes to work like checkboxes, not puzzle games.

Think about the last time you tried to accept terms and conditions on mobile. Tiny checkbox, no visual feedback, you're not even sure if you clicked it. Then you submit the form and get an error because the checkbox wasn't actually checked. Frustrating for users, support tickets for you.

This free shadcn checkbox handles all the edge cases—keyboard navigation, indeterminate states, form integration—while you focus on your business logic. Whether you're building settings panels, multi-select filters, or terms acceptance in your JavaScript apps, checkboxes that work reliably keep users happy.

Common checkbox patterns you'll actually use

Multiple selections

Filters, bulk actions, and multi-select lists:

Loading component...

"use client"import { zodResolver } from "@hookform/resolvers/zod"import { useForm } from "react-hook-form"import { toast } from "sonner"import { z } from "zod"import { Button } from "@/components/ui/button"import { Checkbox } from "@/components/ui/checkbox"import {  Form,  FormControl,  FormDescription,  FormField,  FormItem,  FormLabel,  FormMessage,} from "@/components/ui/form"const items = [  {    id: "recents",    label: "Recents",  },  {    id: "home",    label: "Home",  },  {    id: "applications",    label: "Applications",  },  {    id: "desktop",    label: "Desktop",  },  {    id: "downloads",    label: "Downloads",  },  {    id: "documents",    label: "Documents",  },] as constconst FormSchema = z.object({  items: z.array(z.string()).refine((value) => value.some((item) => item), {    message: "You have to select at least one item.",  }),})export default function CheckboxFormMultiple() {  const form = useForm<z.infer<typeof FormSchema>>({    resolver: zodResolver(FormSchema),    defaultValues: {      items: ["recents", "home"],    },  })  function onSubmit(data: z.infer<typeof FormSchema>) {    toast("You submitted the following values", {      description: (        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">          <code className="text-white">{JSON.stringify(data, null, 2)}</code>        </pre>      ),    })  }  return (    <div className="w-full p-6 flex justify-center">      <Form {...form}>        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">          <FormField            control={form.control}            name="items"            render={() => (              <FormItem>                <div className="mb-4">                  <FormLabel className="text-base">Sidebar</FormLabel>                  <FormDescription>                    Select the items you want to display in the sidebar.                  </FormDescription>                </div>                {items.map((item) => (                  <FormField                    key={item.id}                    control={form.control}                    name="items"                    render={({ field }) => {                      return (                        <FormItem                          key={item.id}                          className="flex flex-row items-center gap-2"                        >                          <FormControl>                            <Checkbox                              checked={field.value?.includes(item.id)}                              onCheckedChange={(checked) => {                                return checked                                  ? field.onChange([...field.value, item.id])                                  : field.onChange(                                      field.value?.filter(                                        (value) => value !== item.id                                      )                                    )                              }}                            />                          </FormControl>                          <FormLabel className="text-sm font-normal">                            {item.label}                          </FormLabel>                        </FormItem>                      )                    }}                  />                ))}                <FormMessage />              </FormItem>            )}          />          <Button type="submit">Submit</Button>        </form>      </Form>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Controlled state management

When you need programmatic control:

Loading component...

Disabled states

Show unavailable options:

Loading component...

Features

This free open source checkbox component includes everything you need:

TypeScript-first - Full type safety with proper boolean and indeterminate states
Three states - Checked, unchecked, and indeterminate for partial selections
Radix UI powered - Battle-tested accessibility and keyboard navigation
Tailwind CSS styled - Customize with utilities, not fighting browser defaults
Form integration - Works seamlessly with React Hook Form and native forms
Mobile optimized - Touch targets that actually work on phones
Screen reader friendly - Proper ARIA attributes and state announcements

API Reference

Checkbox Props

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	-	Controlled checked state
`defaultChecked`	`boolean \| "indeterminate"`	-	Default checked state
`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	-	Change handler
`disabled`	`boolean`	-	Disabled state
`required`	`boolean`	-	Required for form validation
`name`	`string`	-	Form field name
`value`	`string`	`"on"`	Form field value

States and Data Attributes

State	Data Attribute	Use Case
Checked	`[data-state="checked"]`	Fully selected
Unchecked	`[data-state="unchecked"]`	Not selected
Indeterminate	`[data-state="indeterminate"]`	Partial selection
Disabled	`[data-disabled]`	Non-interactive

Key	Action
`Space`	Toggle checked state
`Tab`	Move focus to next element

Production tips

Make touch targets bigger. This free shadcn/ui checkbox looks good at default size, but mobile users need bigger tap areas. Wrap in a larger clickable area or increase padding. Your React checkbox should work for thumbs, not just precise mouse clicks.

Use indeterminate for parent selections. When building hierarchical lists, parent checkboxes should show indeterminate state when some (but not all) children are selected. This TypeScript component handles the state—you handle the logic.

Don't rely on color alone. The checkbox icon provides visual feedback beyond just background color changes. Color-blind users and high-contrast displays need shape changes too. Your Next.js app should be accessible to everyone.

Immediate visual feedback. Users expect instant response when clicking. This open source shadcn component provides smooth animations and state changes. Don't add artificial delays or loading states to simple checkbox interactions.

Form validation that makes sense. Required checkboxes should show clear error messages when not checked. "This field is required" beats cryptic validation text. Your JavaScript forms should guide users, not confuse them.

Integration with other components

Checkboxes work naturally with Form components for validation and submission in your React applications. Use Label components to create larger click targets and improve accessibility.

For multi-select scenarios, combine checkboxes with Card components to group related options. This open source pattern works well for settings panels and preference screens. When building data tables, pair checkboxes with Table components for bulk selection patterns.

In filter interfaces, group checkboxes with Separator components to organize options logically. Your JavaScript components stay organized while providing clear visual hierarchy for complex selection interfaces.

Shadcn Checkbox

Checkbox showcase

Why checkboxes actually handle selections

Common checkbox patterns you'll actually use

Multiple selections

Controlled state management

Disabled states

Features

API Reference

Checkbox Props

States and Data Attributes

Keyboard Navigation

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Checkbox

Reactcheckbox

Reactlabel

Reactbutton

Reactcheckbox

Reactform

Reactcheckbox

Reactlabel

Reactcheckbox

Reactlabel

When should I use Checkbox vs Switch?

How do I handle indeterminate states?

How do checkboxes work with form libraries?

Are checkboxes accessible by default?

Do checkboxes work well on mobile?

Can I customize the checkbox appearance?

Do lots of checkboxes impact performance?

Should I use controlled or uncontrolled checkboxes?

On this page