init project

docs/data/joy/components/checkbox/HoverCheckbox.js

@@ -0,0 +1,23 @@
+import Checkbox from '@mui/joy/Checkbox';
+import Done from '@mui/icons-material/Done';
+
+export default function HoverCheckbox() {
+  return (
+    <Checkbox
+      uncheckedIcon={<Done />}
+      label="My unchecked icon appears on hover"
+      slotProps={{
+        root: ({ checked, focusVisible }) => ({
+          sx: !checked
+            ? {
+                '& svg': { opacity: focusVisible ? 1 : 0 },
+                '&:hover svg': {
+                  opacity: 1,
+                },
+              }
+            : undefined,
+        }),
+      }}
+    />
+  );
+}