Docs
Checkbox

Checkbox

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

With text

You agree to our Terms of Service and Privacy Policy.

Disabled

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(
      "peer w-6 h-6 shrink-0 rounded-sm disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-2 border-black shadow-[4px_4px_0_0_#000] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none dark:hover:shadow-none dark:border-white dark:bg-zinc-900 dark:shadow-[4px_4px_0_0_#fff]",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-white")}
    >
      <Check className="w-6 h-6" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
export { Checkbox }

Copy and paste the checkbox code into your project.

Retro Style CardCombobox