Checkbox

React checkbox component with three states, keyboard navigation, and form integration. Perfect for terms acceptance, settings toggles, and multi-select lists.

Need users to agree to terms? Building a settings panel with toggles? The Checkbox component handles everything from simple yes/no choices to complex multi-selection with indeterminate states.

Loading component...

Built with accessibility in mind and works perfectly in forms, data tables, and anywhere you need user selection.

npx shadcn@latest add checkbox

Why checkboxes work everywhere

Users know exactly what to expect from checkboxes:

Three clear states - Unchecked, checked, and indeterminate for partial selections
Keyboard accessible - Space bar toggles, Tab navigation works perfectly
Form friendly - Integrates seamlessly with React Hook Form and native forms
Screen reader support - ARIA attributes built in for accessibility
Visual feedback - Smooth animations and focus states feel professional
Touch optimized - Works great on mobile devices

Common checkbox patterns you'll need

Accept terms and conditions

The classic signup flow checkbox that everyone recognizes:

Loading component...

Settings and preferences

Perfect for user preference panels and configuration screens:

Loading component...

Multiple item selection

Great for 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 }

Disabled and read-only states

Show options that aren't available or are system-controlled:

Loading component...

Controlled state management

When you need to manage checkbox state from parent components:

Loading component...

API Reference

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child
`defaultChecked`	`boolean \| "indeterminate"`	-	The open state of the checkbox when initially rendered
`checked`	`boolean \| "indeterminate"`	-	The controlled checked state of the checkbox
`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	-	Event handler called when the checked state changes
`disabled`	`boolean`	-	When true, prevents the user from interacting with the checkbox
`required`	`boolean`	-	When true, indicates that the user must check the checkbox before submitting the form
`name`	`string`	-	The name of the checkbox (useful when submitting an HTML form)
`value`	`string`	`on`	The value given as data when submitted with a name

Data Attributes

Attribute	Values
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-disabled]`	Present when disabled

CheckboxIndicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child
`forceMount`	`boolean`	-	Used to force mounting when more control is needed

Data Attributes

Attribute	Values
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-disabled]`	Present when disabled

Key	Description
`Space`	Checks/unchecks the checkbox

Checkbox best practices

What makes checkboxes feel natural and accessible:

Clear labels - "I agree to the Terms of Service" beats "I agree"
Logical grouping - Related checkboxes should be visually grouped together
Smart defaults - Pre-check options that most users want (like "Remember me")
Indeterminate for groups - Show partial selection in parent checkboxes
Accessible spacing - Enough space between checkboxes for touch targets
Immediate feedback - Visual changes happen instantly when clicked
Form validation - Clear error messages when required checkboxes aren't checked
Keyboard support - Space bar and Tab navigation work perfectly

Checkbox

Why checkboxes work everywhere

Common checkbox patterns you'll need

Accept terms and conditions

Settings and preferences

Multiple item selection

Disabled and read-only states

Controlled state management

API Reference

Checkbox

Data Attributes

CheckboxIndicator

Data Attributes

Keyboard Navigation

Checkbox best practices

On this page

Checkbox

Reactcheckbox

Reactlabel

Reactcheckbox

Reactlabel

Reactcheckbox

Reactbutton

Reactcheckbox

Reactform

Reactcheckbox

Reactlabel

Reactcheckbox

Reactlabel

On this page