Factor out checkbox.tsx.

lib/checkbox.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+type CheckboxProps = {
+  label: string;
+  onChange: (value: boolean) => void;
+  value: boolean;
+};
+
+export const Checkbox: React.FC<CheckboxProps> = (props) => {
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={props.value}
+        onChange={(e) => props.onChange(e.target.checked)}
+      />{" "}
+      {props.label}
+    </label>
+  );
+};

lib/pages/creature-page.tsx

@@ -23,6 +23,7 @@ import { svgScale, SvgTransform } from "../svg-transform";
 import { ColorWidget } from "../color-widget";
 import { NumericSlider } from "../numeric-slider";
 import { DEFAULT_BG_COLOR } from "../colors";
+import { Checkbox } from "../checkbox";
 
 /** Symbols that can be the "root" (i.e., main body) of a creature. */
 const ROOT_SYMBOLS = SvgVocabulary.items.filter(
@@ -209,14 +210,11 @@ export const CreaturePage: React.FC<{}> = () => {
         />
       </div>
       <div className="thingy">
-        <label>
+        <Checkbox
-          <input
+          label="Randomly invert symbols"
-            type="checkbox"
+          value={randomlyInvert}
-            checked={randomlyInvert}
+          onChange={setRandomlyInvert}
-            onChange={(e) => setRandomlyInvert(e.target.checked)}
+        />
-          />
-          Randomly invert symbols
-        </label>
       </div>
       <div className="thingy">
         <button accessKey="r" onClick={newRandomSeed}>

lib/symbol-context-widget.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Checkbox } from "./checkbox";
 import { ColorWidget } from "./color-widget";
 import { NumericSlider } from "./numeric-slider";
 import { SvgSymbolContext, swapColors } from "./svg-symbol";
@@ -28,14 +29,11 @@ export const SymbolContextWidget: React.FC<{
       <button onClick={() => updateCtx(swapColors(ctx))}>
         Swap stroke/fill
       </button>{" "}
-      <label>
+      <Checkbox
-        <input
+        label="Show specs"
-          type="checkbox"
+        value={ctx.showSpecs}
-          checked={ctx.showSpecs}
+        onChange={(showSpecs) => updateCtx({ showSpecs })}
-          onChange={(e) => updateCtx({ showSpecs: e.target.checked })}
+      />
-        />{" "}
-        Show specs
-      </label>
       {ctx.uniformStrokeWidth !== undefined && (
         <>
           <br />