init project

docs/data/joy/components/checkbox/IndeterminateCheckbox.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Checkbox from '@mui/joy/Checkbox';
+
+export default function IndeterminateCheckbox() {
+  const [checked, setChecked] = React.useState([true, false]);
+
+  const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([event.target.checked, event.target.checked]);
+  };
+
+  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([event.target.checked, checked[1]]);
+  };
+
+  const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([checked[0], event.target.checked]);
+  };
+
+  const children = (
+    <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3, gap: 1, mt: 1 }}>
+      <Checkbox checked={checked[0]} onChange={handleChange2} label="Child 1" />
+      <Checkbox checked={checked[1]} onChange={handleChange3} label="Child 2" />
+    </Box>
+  );
+
+  return (
+    <div>
+      <Checkbox
+        label="Parent"
+        checked={checked[0] && checked[1]}
+        indeterminate={checked[0] !== checked[1]}
+        onChange={handleChange1}
+      />
+      {children}
+    </div>
+  );
+}