Checkbox

A versatile checkbox component with multiple variants, sizes, and states. Supports labels, descriptions, error states, and indeterminate states for complex form interactions.

Basic Usage

Variants

Sizes

Indeterminate State

Used when some but not all items in a group are selected

With Descriptions

Receive weekly updates about new features and improvements

Get notified about special offers and promotions

I agree to the terms of service and privacy policy

Error States

This field is required

Please check this box to continue

This option is currently unavailable

Checkbox Group

Toggle all options below

Checkbox Component
tsx
1import { InputHTMLAttributes, forwardRef } from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/cn";
4import { Check, Minus } from "lucide-react";
5

6const checkboxVariants = cva(
7  [
8    "peer shrink-0 border border-neutral-300 shadow-sm",
9    "focus:outline-none focus:ring-2 focus:ring-offset-2",
10    "disabled:cursor-not-allowed disabled:opacity-50",
11    "transition-all duration-200 ease-in-out",
12    "dark:border-neutral-700",
13  ],
14  {
15    variants: {