Devie UI

<Checkbox />

The Checkbox component extends Base UI's Checkbox. It's a simple component for binary or tri-state selection, supporting checked, unchecked, and indeterminate states.

Installation

Here is the component implementation code that you can copy to your project:

// https://base-ui.com/react/components/checkbox
 
import { Checkbox as BaseCheckbox } from "@base-ui-components/react/checkbox";
import clsx from "clsx";
import { Check, Minus } from "lucide-react";
import type { ReactNode } from "react";
import styles from "./Checkbox.module.scss";
 
interface CheckboxRootProps extends BaseCheckbox.Root.Props {
  className?: string;
}
 
function Root({ className, ...props }: CheckboxRootProps) {
  return (
    <BaseCheckbox.Root className={clsx(styles.root, className)} {...props} />
  );
}
 
interface CheckboxIndicatorProps extends BaseCheckbox.Indicator.Props {
  className?: string;
  children?: ReactNode;
}
 
function Indicator({ className, children, ...props }: CheckboxIndicatorProps) {
  return (
    <BaseCheckbox.Indicator
      className={clsx(styles.indicator, className)}
      {...props}
    >
      {children || (
        <>
          <Check className={clsx(styles.icon, styles.checkIcon)} strokeWidth={2.5} />
          <Minus className={clsx(styles.icon, styles.indeterminateIcon)} strokeWidth={2.5} />
        </>
      )}
    </BaseCheckbox.Indicator>
  );
}
 
const Checkbox = {
  Root,
  Indicator,
};
 
export default Checkbox;

Use Cases

Checkbox with label

Wrap the checkbox in a label element to make the entire area clickable and improve accessibility.

Checkbox states

The checkbox supports unchecked, checked, indeterminate, and disabled states. The indeterminate state is useful for "select all" scenarios.