Devie UI
Version: 2026-02-14

<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://devie-ui.com/components/checkbox
// https://base-ui.com/react/components/checkbox
 
import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
import clsx from "clsx";
import { Check, Minus } from "lucide-react";
import styles from "./Checkbox.module.scss";
 
function Root({ className, ...props }: BaseCheckbox.Root.Props) {
  return (
    <BaseCheckbox.Root className={clsx(styles.root, className)} {...props} />
  );
}
 
function Indicator({
  className,
  children,
  ...props
}: BaseCheckbox.Indicator.Props) {
  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,
};
 
namespace Checkbox {
  export namespace Root {
    export type Props = BaseCheckbox.Root.Props;
    export type State = BaseCheckbox.Root.State;
    export type ChangeEventDetails = BaseCheckbox.Root.ChangeEventDetails;
  }
  export namespace Indicator {
    export type Props = BaseCheckbox.Indicator.Props;
  }
}
 
export default Checkbox;

Use Cases

Simple Label

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

Checkbox in a Form

Combine with Field to create accessible form checkboxes with labels, descriptions, and validation support.

Checkbox States

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