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
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | "indeterminate" | - | Controlled checked state |
defaultChecked | boolean | "indeterminate" | false | Default checked state |
onCheckedChange | (checked: boolean | "indeterminate") => void | - | Callback when state changes |
label | string | - | Label text |
disabled | boolean | false | Disable the checkbox |
className | string | - | 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

