Docs
Checkbox

Checkbox

A control that allows the user to toggle between checked and not checked.

Installation

Install the following dependencies:

npm install @radix-ui/react-checkbox

Copy and paste the following code into your project.

"use client"
 
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
 
import { cn } from "@/lib/utils"
 
const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "ring-offset-background peer h-4 w-4 shrink-0 rounded-sm border border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
export { Checkbox }

Update the import paths to match your project setup.

Usage

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />

Examples

With text

You agree to our Terms of Service and Privacy Policy.

Disabled

Form

You can manage your mobile notifications in the mobile settings page.

Select the items you want to display in the sidebar.