Checkbox

Example

Accept terms and conditions

Installation

Create a `checkbox.tsx` file and paste the following code into it.

/components/ui/checkbox.tsx usage

"use client";

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

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

interface CheckboxProps extends React.ComponentProps<
  typeof CheckboxPrimitive.Root
> {
  description?: string;
  label?: string;
}

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  CheckboxProps
>(({ className, description, label, id, ...props }, ref) => {
  const checkbox = (
    <CheckboxPrimitive.Root
      id={id}
      ref={ref}
      data-slot="checkbox"
      className={cn(
        "peer border-input dark:bg-input/30 data-[state=checked]:bg-brand data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-brand data-[state=checked]:border-primary data-[state=indeterminate]:bg-brand data-[state=indeterminate]:text-primary-foreground dark:data-[state=indeterminate]:bg-brand data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:focus-visible:border-ring data-[state=checked]:focus-visible:ring-ring/50 data-[state=indeterminate]:focus-visible:border-ring data-[state=indeterminate]:focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] data-[state=checked]:focus-visible:ring-[3px] data-[state=indeterminate]:focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none"
      >
        {props.checked === "indeterminate" ? (
          <MinusIcon className="size-3.5" />
        ) : (
          <CheckIcon className="size-3.5" />
        )}
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );

  if (!label && !description) {
    return checkbox;
  }

  return (
    <div className="flex items-start gap-2">
      {checkbox}
      <div className="grid gap-1.5 leading-none">
        {label && (
          <label
            htmlFor={id}
            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
          >
            {label}
          </label>
        )}
        {description && (
          <p className="text-sm text-muted-foreground">{description}</p>
        )}
      </div>
    </div>
  );
});
Checkbox.displayName = "Checkbox";

export { Checkbox };

"use client";import * as React from "react";import { CheckIcon, MinusIcon } from "lucide-react";import { Checkbox as CheckboxPrimitive } from "radix-ui";import { cn } from "@/lib/utils";interface CheckboxProps extends React.ComponentProps<  typeof CheckboxPrimitive.Root> {  description?: string;  label?: string;}const Checkbox = React.forwardRef<  React.ElementRef<typeof CheckboxPrimitive.Root>,  CheckboxProps>(({ className, description, label, id, ...props }, ref) => {  const checkbox = (    <CheckboxPrimitive.Root      id={id}      ref={ref}      data-slot="checkbox"      className={cn(        "peer border-input dark:bg-input/30 data-[state=checked]:bg-brand data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-brand data-[state=checked]:border-primary data-[state=indeterminate]:bg-brand data-[state=indeterminate]:text-primary-foreground dark:data-[state=indeterminate]:bg-brand data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:focus-visible:border-ring data-[state=checked]:focus-visible:ring-ring/50 data-[state=indeterminate]:focus-visible:border-ring data-[state=indeterminate]:focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] data-[state=checked]:focus-visible:ring-[3px] data-[state=indeterminate]:focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",        className,      )}      {...props}    >      <CheckboxPrimitive.Indicator        data-slot="checkbox-indicator"        className="grid place-content-center text-current transition-none"      >        {props.checked === "indeterminate" ? (          <MinusIcon className="size-3.5" />        ) : (          <CheckIcon className="size-3.5" />        )}      </CheckboxPrimitive.Indicator>    </CheckboxPrimitive.Root>  );  if (!label && !description) {    return checkbox;  }  return (    <div className="flex items-start gap-2">      {checkbox}      <div className="grid gap-1.5 leading-none">        {label && (          <label            htmlFor={id}            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"          >            {label}          </label>        )}        {description && (          <p className="text-sm text-muted-foreground">{description}</p>        )}      </div>    </div>  );});Checkbox.displayName = "Checkbox";export { Checkbox };

Check the import paths to ensure they match your project setup.

Usage

import { Checkbox } from "@/components/ui/checkbox";

<Checkbox checked={checked} onCheckedChange={setChecked} />

The Checkbox forwards all props to Radix UI's Checkbox.Root, including checked, defaultChecked, onCheckedChange, and disabled.

Examples

Default

Default checkbox

With label

Use the peer class on the checkbox (included by default) so the label can respond to the checkbox state. Associate the label with the checkbox using htmlFor and a matching id.

Subscribe to newsletter

Disabled

Disabled checkbox

Controlled

Control the checked state with checked and onCheckedChange. The callback receives a boolean or "indeterminate" for tri-state support.

const [checked, setChecked] = React.useState(false);
<Checkbox checked={checked} onCheckedChange={setChecked} />

Checked by default (defaultChecked)

With description

Use the description prop to add helper text below the checkbox label.

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

<Checkbox
  id="description-example"
  label="Accept terms and conditions"
  description="You agree to our Terms of Service and Privacy Policy."
/>

Focused

The checkbox shows a focus ring when focused via keyboard navigation.

Label

Description

<Checkbox
  id="focused-example"
  label="Label"
  description="Description"
  autoFocus
/>

Focused + Selected

The checkbox can be both checked and focused at the same time. Click on the checkbox to see the focus ring combined with the checked state.

Label

Description

<Checkbox
  id="focused-selected-example"
  label="Label"
  description="Description"
  defaultChecked
/>

Indeterminate

The checkbox supports an indeterminate state, useful for parent checkboxes when only some child items are selected.

Label

Description

<Checkbox
  id="indeterminate-example"
  label="Label"
  description="Description"
  checked="indeterminate"
/>

API Reference

Checkbox

The Checkbox component wraps Radix UI's Checkbox and displays a control for toggling between checked and unchecked states.

labelstring

Default: -

asChildboolean

Default: -

disabledboolean

Default: -

type"button" | "submit" | "reset"

Default: -

descriptionstring

Default: -

Prop	Type	Default	Description
label	string	-	-
asChild	boolean	-	-
disabled	boolean	-	-
type	"button" \| "submit" \| "reset"	-	-
description	string	-	-

Checkbox

Create a checkbox.tsx file and paste the following code into it.

Check the import paths to ensure they match your project setup.

On this page

Create a `checkbox.tsx` file and paste the following code into it.