diff --git a/.changeset/four-windows-retire.md b/.changeset/four-windows-retire.md
new file mode 100644
index 0000000000..cf95d50f3e
--- /dev/null
+++ b/.changeset/four-windows-retire.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": major
+"@khanacademy/perseus-editor": patch
+---
+
+Remove PropCheckBox component from Perseus; use WB instead
diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx
index 17ee3c5f85..b65498183f 100644
--- a/packages/perseus-editor/src/components/graph-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-settings.tsx
@@ -10,13 +10,14 @@ import {
     KhanMath,
     Util,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-const {ButtonGroup, InfoTip, PropCheckBox, RangeInput} = components;
+const {ButtonGroup, InfoTip, RangeInput} = components;
 
 const defaultBackgroundImage = {
     url: null,
@@ -521,10 +522,12 @@ const GraphSettings = createReactClass({
                             />
                         </div>
                         <div className="perseus-widget-left-col">
-                            <PropCheckBox
+                            <Checkbox
                                 label="Show tooltips"
-                                showTooltips={this.props.showTooltips}
-                                onChange={this.change}
+                                checked={this.props.showTooltips}
+                                onChange={(value) => {
+                                    this.change({showTooltips: value});
+                                }}
                             />
                         </div>
                     </div>
@@ -566,17 +569,21 @@ const GraphSettings = createReactClass({
                     <div className="misc-settings">
                         <div className="perseus-widget-row">
                             <div className="perseus-widget-left-col">
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show ruler"
-                                    showRuler={this.props.showRuler}
-                                    onChange={this.change}
+                                    checked={this.props.showRuler}
+                                    onChange={(value) => {
+                                        this.change({showRuler: value});
+                                    }}
                                 />
                             </div>
                             <div className="perseus-widget-right-col">
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show protractor"
-                                    showProtractor={this.props.showProtractor}
-                                    onChange={this.change}
+                                    checked={this.props.showProtractor}
+                                    onChange={(value) => {
+                                        this.change({showProtractor: value});
+                                    }}
                                 />
                             </div>
                         </div>
diff --git a/packages/perseus-editor/src/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/components/interactive-graph-settings.tsx
index 4af8a5d37f..7d957f7fec 100644
--- a/packages/perseus-editor/src/components/interactive-graph-settings.tsx
+++ b/packages/perseus-editor/src/components/interactive-graph-settings.tsx
@@ -10,6 +10,7 @@ import {
 } from "@khanacademy/perseus";
 import Banner from "@khanacademy/wonder-blocks-banner";
 import {View} from "@khanacademy/wonder-blocks-core";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -20,7 +21,7 @@ import Heading from "./heading";
 
 import type {PerseusImageBackground} from "@khanacademy/perseus";
 
-const {ButtonGroup, InfoTip, PropCheckBox, RangeInput} = components;
+const {ButtonGroup, InfoTip, RangeInput} = components;
 
 const defaultBackgroundImage = {
     url: null,
@@ -547,10 +548,12 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                                 </LabeledRow>
                             </div>
                             <div className="perseus-widget-left-col">
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show tooltips"
-                                    showTooltips={this.props.showTooltips}
-                                    onChange={this.change}
+                                    checked={this.props.showTooltips}
+                                    onChange={(value) => {
+                                        this.change({showTooltips: value});
+                                    }}
                                 />
                             </div>
                         </div>
@@ -585,10 +588,12 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
 
                         <View style={styles.protractorSection}>
                             <View style={styles.checkboxRow}>
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show protractor"
-                                    showProtractor={this.props.showProtractor}
-                                    onChange={this.change}
+                                    checked={this.props.showProtractor}
+                                    onChange={(value) => {
+                                        this.change({showProtractor: value});
+                                    }}
                                     style={styles.resetSpaceTop}
                                 />
                             </View>
diff --git a/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
index 738f5beeea..0858fdc222 100644
--- a/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
+++ b/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
@@ -84,6 +84,33 @@ describe("numeric-input-editor", () => {
         expect(onChangeMock).toBeCalledWith({coefficient: true});
     });
 
+    it("should be possible to select strictly match only these formats", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        await userEvent.click(screen.getByLabelText("Toggle options"));
+        await userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Strictly match only these formats",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({
+            answers: [
+                {
+                    answerForms: [],
+                    maxError: null,
+                    message: "",
+                    simplify: "required",
+                    status: "correct",
+                    strict: true,
+                    value: null,
+                },
+            ],
+        });
+    });
+
     it("should be possible to update label text", async () => {
         const onChangeMock = jest.fn();
 
diff --git a/packages/perseus-editor/src/widgets/categorizer-editor.tsx b/packages/perseus-editor/src/widgets/categorizer-editor.tsx
index 37d029f3d1..d2425ffaff 100644
--- a/packages/perseus-editor/src/widgets/categorizer-editor.tsx
+++ b/packages/perseus-editor/src/widgets/categorizer-editor.tsx
@@ -5,11 +5,12 @@ import {
     Changeable,
     EditorJsonify,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {PropCheckBox, TextListEditor} = components;
+const {TextListEditor} = components;
 const Categorizer = CategorizerWidget.widget;
 
 type Props = any;
@@ -45,11 +46,12 @@ class CategorizerEditor extends React.Component<Props> {
         return (
             <div>
                 <div className="perseus-widget-row">
-                    <PropCheckBox
+                    <Checkbox
                         label="Randomize item order"
-                        labelAlignment="right"
-                        randomizeItems={this.props.randomizeItems}
-                        onChange={this.props.onChange}
+                        checked={this.props.randomizeItems}
+                        onChange={(value) => {
+                            this.props.onChange({randomizeItems: value});
+                        }}
                     />
                 </div>
                 Categories:
diff --git a/packages/perseus-editor/src/widgets/cs-program-editor.tsx b/packages/perseus-editor/src/widgets/cs-program-editor.tsx
index 384fa89418..adf4dd4369 100644
--- a/packages/perseus-editor/src/widgets/cs-program-editor.tsx
+++ b/packages/perseus-editor/src/widgets/cs-program-editor.tsx
@@ -11,6 +11,7 @@ import {
     Log,
 } from "@khanacademy/perseus";
 import {Errors} from "@khanacademy/perseus-core";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import $ from "jquery";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -18,7 +19,7 @@ import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 
-const {InfoTip, PropCheckBox} = components;
+const {InfoTip} = components;
 
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -220,20 +221,24 @@ class CSProgramEditor extends React.Component<any> {
                     />
                 </label>
                 <br />
-                <PropCheckBox
+                <Checkbox
                     label="Show Editor"
-                    showEditor={this.props.showEditor}
-                    onChange={this.props.onChange}
+                    checked={this.props.showEditor}
+                    onChange={(value) => {
+                        this.props.onChange({showEditor: value});
+                    }}
                 />
                 <InfoTip>
                     If you show the editor, you should use the "full-width"
                     alignment to make room for the width of the editor.
                 </InfoTip>
                 <br />
-                <PropCheckBox
+                <Checkbox
                     label="Show Buttons"
-                    showButtons={this.props.showButtons}
-                    onChange={this.props.onChange}
+                    checked={this.props.showButtons}
+                    onChange={(value) => {
+                        this.props.onChange({showButtons: value});
+                    }}
                 />
                 <br />
                 <label>
diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
index 66e074ab70..bd40e6b50a 100644
--- a/packages/perseus-editor/src/widgets/expression-editor.tsx
+++ b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -7,6 +7,7 @@ import {
     Expression,
     PerseusExpressionAnswerFormConsidered,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {isTruthy} from "@khanacademy/wonder-stuff-core";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import lens from "hubble";
@@ -17,7 +18,7 @@ import SortableArea from "../components/sortable";
 
 import type {PerseusExpressionWidgetOptions} from "@khanacademy/perseus";
 
-const {InfoTip, PropCheckBox, TextInput} = components;
+const {InfoTip, TextInput} = components;
 
 type Props = {
     widgetId?: any;
@@ -218,12 +219,12 @@ class ExpressionEditor extends React.Component<Props> {
                 </div>
 
                 <div>
-                    <PropCheckBox
-                        times={this.props.times}
-                        onChange={this.props.onChange}
-                        labelAlignment="right"
-                        label="Use × for rendering multiplication instead of a
-                        center dot."
+                    <Checkbox
+                        label="Use × for rendering multiplication instead of a center dot."
+                        checked={this.props.times}
+                        onChange={(value) => {
+                            this.props.onChange({times: value});
+                        }}
                     />
                     <InfoTip>
                         <p>
@@ -542,11 +543,12 @@ class AnswerOption extends React.Component<
                     </div>
 
                     <div className="answer-option">
-                        <PropCheckBox
-                            form={this.props.form}
-                            onChange={this.props.onChange}
-                            labelAlignment="right"
+                        <Checkbox
                             label="Answer expression must have the same form."
+                            checked={this.props.form}
+                            onChange={(value) => {
+                                this.props.onChange({form: value});
+                            }}
                         />
                         <InfoTip>
                             <p>
@@ -558,12 +560,12 @@ class AnswerOption extends React.Component<
                     </div>
 
                     <div className="answer-option">
-                        <PropCheckBox
-                            simplify={this.props.simplify}
-                            onChange={this.props.onChange}
-                            labelAlignment="right"
-                            label="Answer expression must be fully expanded and
-                            simplified."
+                        <Checkbox
+                            label="Answer expression must be fully expanded and simplified."
+                            checked={this.props.simplify}
+                            onChange={(value) => {
+                                this.props.onChange({simplify: value});
+                            }}
                         />
                         <InfoTip>
                             <p>
diff --git a/packages/perseus-editor/src/widgets/iframe-editor.tsx b/packages/perseus-editor/src/widgets/iframe-editor.tsx
index ad95bb5d74..de45b219b9 100644
--- a/packages/perseus-editor/src/widgets/iframe-editor.tsx
+++ b/packages/perseus-editor/src/widgets/iframe-editor.tsx
@@ -1,14 +1,13 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/sort-comp */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 
-const {PropCheckBox} = components;
-
 type PairEditorProps = any;
 
 /**
@@ -174,16 +173,20 @@ class IframeEditor extends React.Component<IframeEditorProps> {
                         onChange={this.change("height")}
                     />
                 </label>
-                <PropCheckBox
+                <Checkbox
                     label="Allow full screen"
-                    allowFullScreen={this.props.allowFullScreen}
-                    onChange={this.props.onChange}
+                    checked={this.props.allowFullScreen}
+                    onChange={(value) => {
+                        this.props.onChange({allowFullScreen: value});
+                    }}
                 />
                 <br />
-                <PropCheckBox
+                <Checkbox
                     label="Allow iframe content to redirect the page"
-                    allowTopNavigation={this.props.allowTopNavigation}
-                    onChange={this.props.onChange}
+                    checked={this.props.allowTopNavigation}
+                    onChange={(value) => {
+                        this.props.onChange({allowTopNavigation: value});
+                    }}
                 />
             </div>
         );
diff --git a/packages/perseus-editor/src/widgets/matcher-editor.tsx b/packages/perseus-editor/src/widgets/matcher-editor.tsx
index 9a2ba16c39..81cc35ed3d 100644
--- a/packages/perseus-editor/src/widgets/matcher-editor.tsx
+++ b/packages/perseus-editor/src/widgets/matcher-editor.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 import {components} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {InfoTip, PropCheckBox, TextListEditor} = components;
+const {InfoTip, TextListEditor} = components;
 
 type Props = any;
 
@@ -79,10 +80,12 @@ class MatcherEditor extends React.Component<Props> {
                     />
                 </div>
                 <div>
-                    <PropCheckBox
+                    <Checkbox
                         label="Order of the matched pairs matters:"
-                        orderMatters={this.props.orderMatters}
-                        onChange={this.props.onChange}
+                        checked={this.props.orderMatters}
+                        onChange={(value) => {
+                            this.props.onChange({orderMatters: value});
+                        }}
                     />
                     <InfoTip>
                         <p>
@@ -100,10 +103,12 @@ class MatcherEditor extends React.Component<Props> {
                     </InfoTip>
                 </div>
                 <div>
-                    <PropCheckBox
+                    <Checkbox
                         label="Padding:"
-                        padding={this.props.padding}
-                        onChange={this.props.onChange}
+                        checked={this.props.padding}
+                        onChange={(value) => {
+                            this.props.onChange({padding: value});
+                        }}
                     />
                     <InfoTip>
                         <p>
diff --git a/packages/perseus-editor/src/widgets/measurer-editor.tsx b/packages/perseus-editor/src/widgets/measurer-editor.tsx
index 1b4060c9ea..67251326b5 100644
--- a/packages/perseus-editor/src/widgets/measurer-editor.tsx
+++ b/packages/perseus-editor/src/widgets/measurer-editor.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/sort-comp */
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {InfoTip, NumberInput, PropCheckBox, RangeInput} = components;
+const {InfoTip, NumberInput, RangeInput} = components;
 
 const defaultImage = {
     url: null,
@@ -103,17 +104,21 @@ class MeasurerEditor extends React.Component<Props> {
                 </div>
                 <div className="perseus-widget-row">
                     <div className="perseus-widget-left-col">
-                        <PropCheckBox
+                        <Checkbox
                             label="Show ruler"
-                            showRuler={this.props.showRuler}
-                            onChange={this.props.onChange}
+                            checked={this.props.showRuler}
+                            onChange={(value) => {
+                                this.props.onChange({showRuler: value});
+                            }}
                         />
                     </div>
                     <div className="perseus-widget-right-col">
-                        <PropCheckBox
+                        <Checkbox
                             label="Show protractor"
-                            showProtractor={this.props.showProtractor}
-                            onChange={this.props.onChange}
+                            checked={this.props.showProtractor}
+                            onChange={(value) => {
+                                this.props.onChange({showProtractor: value});
+                            }}
                         />
                     </div>
                 </div>
diff --git a/packages/perseus-editor/src/widgets/number-line-editor.tsx b/packages/perseus-editor/src/widgets/number-line-editor.tsx
index 088b612b08..b8575da54f 100644
--- a/packages/perseus-editor/src/widgets/number-line-editor.tsx
+++ b/packages/perseus-editor/src/widgets/number-line-editor.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {number as knumber} from "@khanacademy/kmath";
 import {components, EditorJsonify} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {ButtonGroup, InfoTip, NumberInput, PropCheckBox, RangeInput} =
-    components;
+const {ButtonGroup, InfoTip, NumberInput, RangeInput} = components;
 
 type Range = [number, number];
 
@@ -365,28 +365,34 @@ class NumberLineEditor extends React.Component<Props> {
                 <div className="perseus-widget-row">
                     {!this.props.static && (
                         <div className="perseus-widget-left-col">
-                            <PropCheckBox
+                            <Checkbox
                                 label="Show tick controller"
-                                isTickCtrl={this.props.isTickCtrl}
-                                onChange={this.props.onChange}
+                                checked={this.props.isTickCtrl}
+                                onChange={(value) => {
+                                    this.props.onChange({isTickCtrl: value});
+                                }}
                             />
                         </div>
                     )}
                     <div className="perseus-widget-right-col">
-                        <PropCheckBox
+                        <Checkbox
                             label="Show label ticks"
-                            labelTicks={this.props.labelTicks}
-                            onChange={this.props.onChange}
+                            checked={this.props.labelTicks}
+                            onChange={(value) => {
+                                this.props.onChange({labelTicks: value});
+                            }}
                         />
                     </div>
                 </div>
 
                 <div className="perseus-widget-row">
                     {!this.props.static && (
-                        <PropCheckBox
+                        <Checkbox
                             label="Show tooltips"
-                            showTooltips={this.props.showTooltips}
-                            onChange={this.props.onChange}
+                            checked={this.props.showTooltips}
+                            onChange={(value) => {
+                                this.props.onChange({showTooltips: value});
+                            }}
                         />
                     )}
                 </div>
diff --git a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
index 3c655d1db0..8fb01b35cb 100644
--- a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
+++ b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
@@ -7,6 +7,7 @@ import {
     Util,
     PerseusI18nContext,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 import _ from "underscore";
 
@@ -20,7 +21,6 @@ const {
     InlineIcon,
     MultiButtonGroup,
     NumberInput,
-    PropCheckBox,
     TextInput,
 } = components;
 const {iconGear, iconTrash} = icons;
@@ -197,11 +197,12 @@ class NumericInputEditor extends React.Component<Props, State> {
                     </InfoTip>
                 </div>
                 <div className="perseus-widget-row">
-                    <PropCheckBox
+                    <Checkbox
                         label="Strictly match only these formats"
-                        strict={answers[i]["strict"]}
-                        // eslint-disable-next-line react/jsx-no-bind
-                        onChange={this.updateAnswer.bind(this, i)}
+                        checked={answers[i]["strict"]}
+                        onChange={(value) => {
+                            this.updateAnswer.bind(this, i)({strict: value});
+                        }}
                     />
                 </div>
             </div>
@@ -245,10 +246,12 @@ class NumericInputEditor extends React.Component<Props, State> {
 
         const rightAlign = (
             <div className="perseus-widget-row">
-                <PropCheckBox
+                <Checkbox
                     label="Right alignment"
-                    rightAlign={this.props.rightAlign}
-                    onChange={this.props.onChange}
+                    checked={this.props.rightAlign}
+                    onChange={(value) => {
+                        this.props.onChange({rightAlign: value});
+                    }}
                 />
             </div>
         );
@@ -274,10 +277,12 @@ class NumericInputEditor extends React.Component<Props, State> {
         const coefficientCheck = (
             <div>
                 <div className="perseus-widget-row">
-                    <PropCheckBox
+                    <Checkbox
                         label="Coefficient"
-                        coefficient={this.props.coefficient}
-                        onChange={this.props.onChange}
+                        checked={this.props.coefficient}
+                        onChange={(value) => {
+                            this.props.onChange({coefficient: value});
+                        }}
                     />
                     <InfoTip>
                         <p>
diff --git a/packages/perseus-editor/src/widgets/passage-editor.tsx b/packages/perseus-editor/src/widgets/passage-editor.tsx
index f2d913b34d..c0755a1b32 100644
--- a/packages/perseus-editor/src/widgets/passage-editor.tsx
+++ b/packages/perseus-editor/src/widgets/passage-editor.tsx
@@ -1,11 +1,12 @@
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import Editor from "../editor";
 
-const {InfoTip, PropCheckBox} = components;
+const {InfoTip} = components;
 
 type Props = any;
 
@@ -68,11 +69,12 @@ class PassageEditor extends React.Component<Props> {
         return (
             <div className="perseus-widget-passage-editor">
                 <div className="perseus-widget-row">
-                    <PropCheckBox
+                    <Checkbox
                         label="Show line numbers"
-                        labelAlignment="right"
-                        showLineNumbers={this.props.showLineNumbers}
-                        onChange={this.props.onChange}
+                        checked={this.props.showLineNumbers}
+                        onChange={(value) => {
+                            this.props.onChange({showLineNumbers: value});
+                        }}
                     />
                 </div>
                 <div>
diff --git a/packages/perseus-editor/src/widgets/radio/editor.tsx b/packages/perseus-editor/src/widgets/radio/editor.tsx
index f106d66c9b..fc50cefad7 100644
--- a/packages/perseus-editor/src/widgets/radio/editor.tsx
+++ b/packages/perseus-editor/src/widgets/radio/editor.tsx
@@ -6,13 +6,14 @@ import {
     BaseRadio,
     Changeable,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import Editor from "../../editor";
 
-const {InlineIcon, PropCheckBox} = components;
+const {InlineIcon} = components;
 const {iconPlus, iconTrash} = icons;
 
 class ChoiceEditor extends React.Component<any> {
@@ -150,28 +151,35 @@ class RadioEditor extends React.Component<any> {
                     </a>
                     <br />
                     <div className="perseus-widget-left-col">
-                        <PropCheckBox
+                        <Checkbox
                             label="Multiple selections"
-                            labelAlignment="right"
-                            multipleSelect={this.props.multipleSelect}
-                            onChange={this.onMultipleSelectChange}
+                            checked={this.props.multipleSelect}
+                            onChange={(value) => {
+                                this.onMultipleSelectChange({
+                                    multipleSelect: value,
+                                });
+                            }}
                         />
                     </div>
                     <div className="perseus-widget-right-col">
-                        <PropCheckBox
+                        <Checkbox
                             label="Randomize order"
-                            labelAlignment="right"
-                            randomize={this.props.randomize}
-                            onChange={this.props.onChange}
+                            checked={this.props.randomize}
+                            onChange={(value) => {
+                                this.props.onChange({randomize: value});
+                            }}
                         />
                     </div>
                     {this.props.multipleSelect && (
                         <div className="perseus-widget-left-col">
-                            <PropCheckBox
+                            <Checkbox
                                 label="Specify number correct"
-                                labelAlignment="right"
-                                countChoices={this.props.countChoices}
-                                onChange={this.onCountChoicesChange}
+                                checked={this.props.countChoices}
+                                onChange={(value) => {
+                                    this.onCountChoicesChange({
+                                        countChoices: value,
+                                    });
+                                }}
                             />
                         </div>
                     )}
diff --git a/packages/perseus-editor/src/widgets/sorter-editor.tsx b/packages/perseus-editor/src/widgets/sorter-editor.tsx
index 4aed056341..6840b62243 100644
--- a/packages/perseus-editor/src/widgets/sorter-editor.tsx
+++ b/packages/perseus-editor/src/widgets/sorter-editor.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/forbid-prop-types */
 import {components} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {InfoTip, PropCheckBox, TextListEditor} = components;
+const {InfoTip, TextListEditor} = components;
 
 const HORIZONTAL = "horizontal";
 const VERTICAL = "vertical";
@@ -84,10 +85,12 @@ class SorterEditor extends React.Component<Props> {
                     </InfoTip>
                 </div>
                 <div>
-                    <PropCheckBox
+                    <Checkbox
                         label="Padding:"
-                        padding={this.props.padding}
-                        onChange={this.props.onChange}
+                        checked={this.props.padding}
+                        onChange={(value) => {
+                            this.props.onChange({padding: value});
+                        }}
                     />
                     <InfoTip>
                         <p>
diff --git a/packages/perseus/src/components.ts b/packages/perseus/src/components.ts
index 9c529c7159..ca12de1252 100644
--- a/packages/perseus/src/components.ts
+++ b/packages/perseus/src/components.ts
@@ -8,7 +8,6 @@ export {default as InlineIcon} from "./components/inline-icon";
 export {default as MathInput} from "./components/math-input";
 export {default as MultiButtonGroup} from "./components/multi-button-group";
 export {default as NumberInput} from "./components/number-input";
-export {default as PropCheckBox} from "./components/prop-check-box";
 export {default as RangeInput} from "./components/range-input";
 export {default as SvgImage} from "./components/svg-image";
 export {default as TextInput} from "./components/text-input";
diff --git a/packages/perseus/src/components/__stories__/prop-check-box.stories.tsx b/packages/perseus/src/components/__stories__/prop-check-box.stories.tsx
deleted file mode 100644
index 09eed8aa89..0000000000
--- a/packages/perseus/src/components/__stories__/prop-check-box.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from "react";
-
-import PropCheckBox from "../prop-check-box";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Components/Prop Check Box",
-} as Story;
-
-export const TestLabelWithCheckedObject = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={true}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="left"
-        />
-    );
-};
-
-export const TestLabelWithUncheckedObject = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={false}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="left"
-        />
-    );
-};
-
-export const TestLabelWithCheckedObjectLabelOnTheRight = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={true}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="right"
-        />
-    );
-};
-
-export const TestLabelWithUncheckedObjectLabelOnTheRight = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={false}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="right"
-        />
-    );
-};
diff --git a/packages/perseus/src/components/prop-check-box.tsx b/packages/perseus/src/components/prop-check-box.tsx
deleted file mode 100644
index 13380aef6d..0000000000
--- a/packages/perseus/src/components/prop-check-box.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-/* eslint-disable react/sort-comp */
-import {Errors, PerseusError} from "@khanacademy/perseus-core";
-import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import {css, StyleSheet} from "aphrodite";
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-/* A checkbox that syncs its value to props using the
- * renderer's onChange method, and gets the prop name
- * dynamically from its props list
- */
-const PropCheckBox: any = createReactClass({
-    displayName: "PropCheckBox",
-
-    propTypes: {
-        labelAlignment: PropTypes.oneOf(["left", "right"]),
-    },
-
-    DEFAULT_PROPS: {
-        label: null,
-        onChange: null,
-        labelAlignment: "left",
-    },
-
-    getDefaultProps: function () {
-        return this.DEFAULT_PROPS;
-    },
-
-    propName: function () {
-        const propName = _.find(
-            _.keys(this.props),
-            function (localPropName) {
-                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                return !_.has(this.DEFAULT_PROPS, localPropName);
-            },
-            this,
-        );
-
-        if (!propName) {
-            throw new PerseusError(
-                "Attempted to create a PropCheckBox with no prop!",
-                Errors.InvalidInput,
-            );
-        }
-
-        return propName;
-    },
-
-    _labelAlignLeft: function () {
-        return this.props.labelAlignment === "left";
-    },
-
-    render: function () {
-        const propName = this.propName();
-        return (
-            <label className={css(styles.labeledCheckbox)}>
-                {this._labelAlignLeft() && (
-                    <LabelSmall>{this.props.label}</LabelSmall>
-                )}
-                <Checkbox
-                    checked={this.props[propName]}
-                    onChange={this.toggle}
-                />
-                {!this._labelAlignLeft() && (
-                    <LabelSmall>{this.props.label}</LabelSmall>
-                )}
-            </label>
-        );
-    },
-
-    toggle: function () {
-        const propName = this.propName();
-        const changes: Record<string, any> = {};
-        changes[propName] = !this.props[propName];
-        this.props.onChange(changes);
-    },
-});
-
-export const styles = StyleSheet.create({
-    labeledCheckbox: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-    },
-});
-
-export default PropCheckBox;