traverse toy

packages/website/src/components/Checkbox/index.module.css

@@ -0,0 +1,19 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+
+  .control {
+    width: 1.25em;
+    height: 1.25em;
+
+    margin: 0;
+
+    accent-color: var(--accent-9);
+  }
+
+  &,
+  * {
+    cursor: pointer;
+  }
+}

packages/website/src/components/Checkbox/index.tsx

@@ -0,0 +1,35 @@
+import { useId, type ReactNode } from "react";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+export interface CheckboxProps {
+  checked: boolean;
+  onCheckedChange(checked: boolean): void;
+  children?: ReactNode;
+}
+
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  children,
+}: CheckboxProps) {
+  const id = useId();
+
+  return (
+    <div className={styles.checkbox}>
+      <input
+        className={styles.control}
+        type="checkbox"
+        id={id}
+        checked={checked}
+        onChange={(event) => onCheckedChange(event.target.checked)}
+      />
+
+      {children && (
+        <label htmlFor={id}>
+          <Text lowContrast>{children}</Text>
+        </label>
+      )}
+    </div>
+  );
+}