Checkbox

Binary toggle.

stableBase UI Checkbox

Preview

Notify on critical alerts

Code

tsx

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

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Checkbox id="notify" defaultChecked />
      <Label htmlFor="notify">Notify on critical alerts</Label>
    </div>
  );
}

Props

Prop	Type	Default	Description
checked	`boolean`	—	Controlled checked state.
defaultChecked	`boolean`	—	Uncontrolled initial checked state.
onCheckedChange	`(checked: boolean) => void`	—	Called when the checked state changes.
disabled	`boolean`	false	Disables interaction.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Built on Base UI Checkbox. Always pair with a `Label` for accessibility. Base UI handles keyboard support (Space) and `aria-checked`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/checkbox.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

"use client";

import { cn } from "@/lib/utils";
import { Checkbox as BaseCheckbox } from "@base-ui-components/react/checkbox";
import { Check } from "lucide-react";
import type { ComponentPropsWithoutRef } from "react";

export function Checkbox({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof BaseCheckbox.Root>) {
  return (
    <BaseCheckbox.Root
      className={cn(
        "peer inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border-strong bg-surface shadow-sm transition-colors",
        "data-[checked]:border-accent data-[checked]:bg-accent data-[checked]:text-accent-fg",
        "data-[indeterminate]:border-accent data-[indeterminate]:bg-accent data-[indeterminate]:text-accent-fg",
        "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
        className,
      )}
      {...props}
    >
      <BaseCheckbox.Indicator className="flex items-center justify-center text-current data-[unchecked]:hidden">
        <Check className="h-3 w-3" />
      </BaseCheckbox.Indicator>
    </BaseCheckbox.Root>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmCheckbox (extends CheckBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmCheckbox;

PrizmCheckbox()
PrizmCheckbox(String text)

Prop	Type	Default	Description
selected	`BooleanProperty`	false	Checked state; accent fill when selected.
indeterminate	`BooleanProperty`	false	Tri-state indeterminate (enable via allowIndeterminate).

Thin subclass of CheckBox; styling from the .check-box rules in prizm.css. Mirrors components/ui/checkbox.tsx.