Checkbox

An easily stylable checkbox component.

Accept terms and conditions

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

export function CheckboxDemo() {
  return (
    <Label>
      <Checkbox />
      Accept terms and conditions
    </Label>
  );
}

Installation

components/ui/checkbox.tsx

"use client";

import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";

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

function Checkbox({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
  size?: "xs" | "sm" | "default" | "lg" | "xl";
}) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded border-input text-primary-foreground outline-none ring-ring focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background data-disabled:cursor-not-allowed data-unchecked:border data-checked:bg-primary data-indeterminate:bg-primary data-disabled:opacity-50 dark:data-unchecked:bg-input/30",
        "aria-invalid:border-danger aria-invalid:ring-danger/30",
        size === "xs" && "size-3 [&_svg]:size-2.5",
        size === "sm" && "size-3.5 [&_svg]:size-2.75",
        size === "lg" && "size-5 [&_svg]:size-3.5",
        size === "xl" && "size-5.5 [&_svg]:size-4",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex size-full items-center justify-center data-unchecked:hidden"
        render={(props: React.ComponentProps<"span">, state: CheckboxPrimitive.Indicator.State) => (
          <span {...props}>
            {state.indeterminate ? (
              <svg
                aria-hidden="true"
                className="size-3"
                fill="none"
                height="24"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="3"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M5.252 12h13.496" />
              </svg>
            ) : (
              <svg
                aria-hidden="true"
                className="size-3"
                fill="none"
                height="24"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="3"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
              </svg>
            )}
          </span>
        )}
      />
    </CheckboxPrimitive.Root>
  );
}

export { Checkbox };

// function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
//   return (
//     <CheckboxPrimitive.Root
//       data-slot="checkbox"
//       className={cn(
//         "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 group-has-disabled/field:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:data-checked:bg-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
//         className
//       )}
//       {...props}
//     >
//       <CheckboxPrimitive.Indicator
//         data-slot="checkbox-indicator"
//         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
//       >
//         <IconCheck />
//       </CheckboxPrimitive.Indicator>
//     </CheckboxPrimitive.Root>
//   );
// }

// export { Checkbox };

Usage

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

<Checkbox />

Examples

Sizes

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

export function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Label className="flex items-center gap-2 text-xs">
        <Checkbox size="xs" />
        Size xs
      </Label>
      <Label className="flex items-center gap-2">
        <Checkbox size="sm" />
        Size sm
      </Label>
      <Label className="flex items-center gap-2">
        <Checkbox size="default" />
        Size md
      </Label>
      <Label className="flex items-center gap-2 text-base">
        <Checkbox size="lg" />
        Size lg
      </Label>
      <Label className="flex items-center gap-2 text-base">
        <Checkbox size="xl" />
        Size xl
      </Label>
    </div>
  );
}

Disabled

Accept terms and conditions

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

export function CheckboxDemo() {
  return (
    <Label>
      <Checkbox disabled />
      Accept terms and conditions
    </Label>
  );
}

Indeterminate

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

export function CheckboxDemo() {
  return (
    <Label>
      <Checkbox indeterminate />
      Indeterminate
    </Label>
  );
}

Controlled

Accept terms and conditions

Checked: false

"use client";

import { useState } from "react";

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

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="flex flex-col gap-3">
      <Label>
        <Checkbox checked={checked} onCheckedChange={setChecked} />
        Accept terms and conditions
      </Label>
      <p>Checked: {checked.toString()}</p>
    </div>
  );
}

With description

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

import { useId } from "react";

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

export function CheckboxDemo() {
  const id = useId();
  return (
    <div className="flex items-start gap-2">
      <Checkbox defaultChecked id={id} />
      <div className="flex flex-col gap-1">
        <Label htmlFor={id}>Accept terms and conditions</Label>
        <p className="text-muted-foreground text-xs">
          By clicking this checkbox, you agree to the terms and conditions.
        </p>
      </div>
    </div>
  );
}

Card style

Enable notifications

You can enable or disable notifications at any time.

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

export function CheckboxDemo() {
  return (
    <Label className="flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/50 has-data-checked:bg-accent/50">
      <Checkbox defaultChecked />
      <div className="flex flex-col gap-1">
        <p>Enable notifications</p>
        <p className="text-muted-foreground text-xs">
          You can enable or disable notifications at any time.
        </p>
      </div>
    </Label>
  );
}

API Reference

Checkbox props

Prop

Type

Default

size?

'xs' | 'sm' | 'default' | 'lg' | 'xl'

'default'

Checkbox Group Collapsible

Checkbox

size?'xs' | 'sm' | 'default' | 'lg' | 'xl''default'

On this page