Command Palette

Search for a command to run...

Docs
Checkbox Indeterminate

Checkbox Indeterminate

A checkbox with three states - checked, unchecked, and indeterminate.

Installation

Usage

import { useState } from "react";
import CheckboxIndeterminate from "@/components/ruixen/checkbox-indeterminate";
 
export default function MyComponent() {
  const [checked, setChecked] = useState<boolean | "indeterminate">(
    "indeterminate",
  );
 
  return (
    <CheckboxIndeterminate
      checked={checked}
      onCheckedChange={setChecked}
      label="Select all"
    />
  );
}

Props

PropTypeDefaultDescription
checkedboolean | "indeterminate"-Controlled checked state
defaultCheckedboolean | "indeterminate"falseDefault checked state
onCheckedChange(checked: boolean | "indeterminate") => void-Callback when state changes
labelstring-Label text
disabledbooleanfalseDisable the checkbox
classNamestring-Additional CSS classes

Features

  • Three-state checkbox (checked, unchecked, indeterminate)
  • Perfect for "select all" parent checkboxes
  • Visual minus icon for indeterminate state
  • Accessible focus states
  • Light and dark mode support