diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7425726..3a428649 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,9 @@ Changelog
 
 ## HEAD
 
+- [breaking] Rewrites `src/components/control-switch` as a functional component.and uses [`swtich` from Radix](https://radix-website-git-release.modulz-deploys.com/docs/primitives/components/switch). 🚨 **Drop options**:
+    - `optional`: Additional text like "optional" should be applied by the consumer using the label prop.
+    - `initialValue` and `validator` which were previously provided by the form component.
 - [breaking] Rewrites `src/components/icon` as a functional component and uses [`accessible-icon` from Radix](https://www.radix-ui.com/docs/primitives/utilities/accessible-icon) as an internal primitive.
 - [breaking] Rewrites `src/components/control-wrapper` as a functional component.
 - [feature] Introduces TypeScript to the source code and converts:
diff --git a/package-lock.json b/package-lock.json
index 60c11d71..9d4750af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3646,15 +3646,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@radix-ui/popper": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/popper/-/popper-0.1.0.tgz",
-      "integrity": "sha512-uzYeElL3w7SeNMuQpXiFlBhTT+JyaNMCwDfjKkrzugEcYrf5n52PHqncNdQPUtR42hJh8V9FsqyEDbDxkeNjJQ==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "csstype": "^3.0.4"
-      }
-    },
     "@radix-ui/primitive": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-0.1.0.tgz",
@@ -3672,15 +3663,6 @@
         "@radix-ui/react-visually-hidden": "0.1.4"
       }
     },
-    "@radix-ui/react-arrow": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.4.tgz",
-      "integrity": "sha512-BB6XzAb7Ml7+wwpFdYVtZpK1BlMgqyafSQNGzhIpSZ4uXvXOHPlR5GP8M449JkeQzgQjv9Mp1AsJxFC0KuOtuA==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "0.1.4"
-      }
-    },
     "@radix-ui/react-compose-refs": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz",
@@ -3718,42 +3700,6 @@
         "@radix-ui/react-primitive": "0.1.4"
       }
     },
-    "@radix-ui/react-popper": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-0.1.4.tgz",
-      "integrity": "sha512-18gDYof97t8UQa7zwklG1Dr8jIdj3u+rVOQLzPi9f5i1YQak/pVGkaqw8aY+iDUknKKuZniTk/7jbAJUYlKyOw==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/popper": "0.1.0",
-        "@radix-ui/react-arrow": "0.1.4",
-        "@radix-ui/react-compose-refs": "0.1.0",
-        "@radix-ui/react-context": "0.1.1",
-        "@radix-ui/react-primitive": "0.1.4",
-        "@radix-ui/react-use-rect": "0.1.1",
-        "@radix-ui/react-use-size": "0.1.1",
-        "@radix-ui/rect": "0.1.1"
-      }
-    },
-    "@radix-ui/react-portal": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-0.1.4.tgz",
-      "integrity": "sha512-MO0wRy2eYRTZ/CyOri9NANCAtAtq89DEtg90gicaTlkCfdqCLEBsLb+/q66BZQTr3xX/Vq01nnVfc/TkCqoqvw==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "0.1.4",
-        "@radix-ui/react-use-layout-effect": "0.1.0"
-      }
-    },
-    "@radix-ui/react-presence": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-0.1.2.tgz",
-      "integrity": "sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "0.1.0",
-        "@radix-ui/react-use-layout-effect": "0.1.0"
-      }
-    },
     "@radix-ui/react-primitive": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz",
@@ -3788,28 +3734,6 @@
         "@radix-ui/react-use-size": "0.1.1"
       }
     },
-    "@radix-ui/react-tooltip": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz",
-      "integrity": "sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "0.1.0",
-        "@radix-ui/react-compose-refs": "0.1.0",
-        "@radix-ui/react-context": "0.1.1",
-        "@radix-ui/react-id": "0.1.5",
-        "@radix-ui/react-popper": "0.1.4",
-        "@radix-ui/react-portal": "0.1.4",
-        "@radix-ui/react-presence": "0.1.2",
-        "@radix-ui/react-primitive": "0.1.4",
-        "@radix-ui/react-slot": "0.1.2",
-        "@radix-ui/react-use-controllable-state": "0.1.0",
-        "@radix-ui/react-use-escape-keydown": "0.1.0",
-        "@radix-ui/react-use-previous": "0.1.1",
-        "@radix-ui/react-use-rect": "0.1.1",
-        "@radix-ui/react-visually-hidden": "0.1.4"
-      }
-    },
     "@radix-ui/react-use-callback-ref": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz",
@@ -3827,15 +3751,6 @@
         "@radix-ui/react-use-callback-ref": "0.1.0"
       }
     },
-    "@radix-ui/react-use-escape-keydown": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz",
-      "integrity": "sha512-tDLZbTGFmvXaazUXXv8kYbiCcbAE8yKgng9s95d8fCO+Eundv0Jngbn/hKPhDDs4jj9ChwRX5cDDnlaN+ugYYQ==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "0.1.0"
-      }
-    },
     "@radix-ui/react-use-layout-effect": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz",
@@ -3852,15 +3767,6 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "@radix-ui/react-use-rect": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz",
-      "integrity": "sha512-kHNNXAsP3/PeszEmM/nxBBS9Jbo93sO+xuMTcRfwzXsmxT5gDXQzAiKbZQ0EecCPtJIzqvr7dlaQi/aP1PKYqQ==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/rect": "0.1.1"
-      }
-    },
     "@radix-ui/react-use-size": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz",
@@ -3878,14 +3784,6 @@
         "@radix-ui/react-primitive": "0.1.4"
       }
     },
-    "@radix-ui/rect": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-0.1.1.tgz",
-      "integrity": "sha512-g3hnE/UcOg7REdewduRPAK88EPuLZtaq7sA9ouu8S+YEtnyFRI16jgv6GZYe3VMoQLL1T171ebmEPtDjyxWLzw==",
-      "requires": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
     "@reach/router": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
@@ -8238,7 +8136,8 @@
     "csstype": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
+      "dev": true
     },
     "cuid": {
       "version": "1.3.8",
diff --git a/package.json b/package.json
index 0f706cb0..8823dbb5 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@mapbox/query-selector-contains-node": "^1.0.0",
     "@radix-ui/react-accessible-icon": "^0.1.4",
+    "@radix-ui/react-switch": "^0.1.5",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.0",
     "debounce": "^1.1.0",
diff --git a/src/components/control-switch/__tests__/__snapshots__/control-switch.test.js.snap b/src/components/control-switch/__tests__/__snapshots__/control-switch.test.js.snap
deleted file mode 100644
index 9fdd7888..00000000
--- a/src/components/control-switch/__tests__/__snapshots__/control-switch.test.js.snap
+++ /dev/null
@@ -1,117 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ControlSwitch all options renders 1`] = `
-<ControlWrapper
-  id="testinput"
-  themeControlWrapper="bg-red-light"
-  validationError="oh no!"
->
-  <label
-    className="switch-container txt-s"
-  >
-    <input
-      aria-invalid={true}
-      autoFocus={true}
-      checked={true}
-      data-test="testinput-input"
-      id="testinput"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <div
-      className="switch switch--red switch--dot-yellow"
-    />
-    <span
-      className="color-white txt-m"
-    >
-      <span>
-        All options
-      </span>
-      <span
-        className="ml3 txt-normal"
-      >
-        (optional)
-      </span>
-    </span>
-  </label>
-</ControlWrapper>
-`;
-
-exports[`ControlSwitch basic onChange gets called with input id and value 1`] = `
-<ControlWrapper
-  id="testinput"
->
-  <label
-    className="switch-container "
-  >
-    <input
-      checked={false}
-      data-test="testinput-input"
-      id="testinput"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <div
-      className="switch switch--s-label"
-    />
-    <span
-      className="txt-s ml6"
-    >
-      Basic
-    </span>
-  </label>
-</ControlWrapper>
-`;
-
-exports[`ControlSwitch basic renders 1`] = `
-<ControlWrapper
-  id="testinput"
->
-  <label
-    className="switch-container "
-  >
-    <input
-      checked={false}
-      data-test="testinput-input"
-      id="testinput"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <div
-      className="switch switch--s-label"
-    />
-    <span
-      className="txt-s ml6"
-    >
-      Basic
-    </span>
-  </label>
-</ControlWrapper>
-`;
-
-exports[`ControlSwitch disabled renders 1`] = `
-<ControlWrapper
-  id="testinput"
->
-  <label
-    className="switch-container "
-  >
-    <input
-      checked={false}
-      data-test="testinput-input"
-      disabled={true}
-      id="testinput"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <div
-      className="switch switch--s-label"
-    />
-    <span
-      className="txt-s ml6"
-    >
-      Disabled
-    </span>
-  </label>
-</ControlWrapper>
-`;
diff --git a/src/components/control-switch/__tests__/__snapshots__/control-switch.test.tsx.snap b/src/components/control-switch/__tests__/__snapshots__/control-switch.test.tsx.snap
new file mode 100644
index 00000000..9b436064
--- /dev/null
+++ b/src/components/control-switch/__tests__/__snapshots__/control-switch.test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ControlSwitch basic renders 1`] = `
+<body>
+  <div>
+    <div
+      class="relative "
+    >
+      <fieldset
+        class="flex flex--center-cross"
+      >
+        <label
+          class="switch-container "
+          for="test"
+        >
+          <button
+            aria-checked="false"
+            class="switch switch--s-label"
+            data-state="unchecked"
+            data-testid="test-switch"
+            id="test"
+            role="switch"
+            type="button"
+            value="on"
+          >
+            <span
+              data-state="unchecked"
+            />
+          </button>
+          <span
+            class="txt-s ml6"
+          >
+            Basic
+          </span>
+        </label>
+      </fieldset>
+      <div
+        role="alert"
+      />
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/components/control-switch/__tests__/control-switch-test-cases.js b/src/components/control-switch/__tests__/control-switch-test-cases.js
deleted file mode 100644
index feb3601b..00000000
--- a/src/components/control-switch/__tests__/control-switch-test-cases.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import ControlSwitch from '../control-switch';
-import safeSpy from '../../../test-utils/safe-spy';
-
-const testCases = {};
-
-testCases.basic = {
-  description: 'basic',
-  component: ControlSwitch,
-  props: {
-    id: 'testinput',
-    label: 'Basic',
-    onChange: safeSpy()
-  }
-};
-
-testCases.emptyStringValue = {
-  description: 'empty string value',
-  component: ControlSwitch,
-  props: {
-    id: 'testinput',
-    label: 'Basic',
-    onChange: safeSpy(),
-    value: ''
-  }
-};
-
-testCases.disabled = {
-  description: 'disabled',
-  component: ControlSwitch,
-  props: {
-    id: 'testinput',
-    disabled: true,
-    label: 'Disabled',
-    onChange: safeSpy()
-  }
-};
-
-testCases.allOptions = {
-  description: 'all options',
-  component: ControlSwitch,
-  props: {
-    id: 'testinput',
-    validationError: 'oh no!',
-    value: true,
-    autoFocus: true,
-    optional: true,
-    label: <span>All options</span>,
-    themeControlSwitchContainer: 'txt-s',
-    themeControlSwitch: 'switch--red switch--dot-yellow',
-    themeControlWrapper: 'bg-red-light',
-    themeLabel: 'color-white txt-m',
-    onChange: safeSpy()
-  }
-};
-
-export { testCases };
diff --git a/src/components/control-switch/__tests__/control-switch.test.js b/src/components/control-switch/__tests__/control-switch.test.js
deleted file mode 100644
index 73314f0a..00000000
--- a/src/components/control-switch/__tests__/control-switch.test.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { testCases } from './control-switch-test-cases';
-
-describe('ControlSwitch', () => {
-  let testCase;
-  let wrapper;
-
-  describe(testCases.basic.description, () => {
-    beforeEach(() => {
-      testCase = testCases.basic;
-      wrapper = shallow(
-        React.createElement(testCase.component, testCase.props)
-      );
-    });
-
-    test('renders', () => {
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('onChange gets called with input id and value', () => {
-      const mockEvent = {
-        target: {
-          checked: true
-        }
-      };
-      wrapper.find('input').first().props().onChange(mockEvent);
-      wrapper.update();
-      expect(wrapper).toMatchSnapshot();
-      expect(testCase.props.onChange).toHaveBeenCalledTimes(1);
-      expect(testCase.props.onChange).toHaveBeenCalledWith(true, 'testinput');
-    });
-  });
-
-  describe(testCases.emptyStringValue.description, () => {
-    beforeEach(() => {
-      testCase = testCases.emptyStringValue;
-      wrapper = shallow(
-        React.createElement(testCase.component, testCase.props)
-      );
-    });
-
-    test('input is not checked', () => {
-      expect(wrapper.find('input').prop('checked')).toBe(false);
-    });
-  });
-
-  describe(testCases.disabled.description, () => {
-    beforeEach(() => {
-      testCase = testCases.disabled;
-      wrapper = shallow(
-        React.createElement(testCase.component, testCase.props)
-      );
-    });
-
-    test('renders', () => {
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('extra props works', () => {
-      const props = wrapper.find('input').last().props();
-      expect(props).toHaveProperty('disabled', true);
-    });
-  });
-
-  describe(testCases.allOptions.description, () => {
-    beforeEach(() => {
-      testCase = testCases.allOptions;
-      wrapper = shallow(
-        React.createElement(testCase.component, testCase.props)
-      );
-    });
-
-    test('renders', () => {
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('extra props works', () => {
-      const props = wrapper.find('input').last().props();
-      expect(props).toHaveProperty('autoFocus', true);
-    });
-  });
-});
diff --git a/src/components/control-switch/__tests__/control-switch.test.tsx b/src/components/control-switch/__tests__/control-switch.test.tsx
new file mode 100644
index 00000000..a635f02e
--- /dev/null
+++ b/src/components/control-switch/__tests__/control-switch.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import ControlSwitch from '../control-switch';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('ControlSwitch', () => {
+  let wrapper;
+
+  describe('basic', () => {
+    const props = {
+      id: 'test',
+      label: 'Basic',
+      onChange: jest.fn()
+    };
+
+    beforeEach(() => {
+      wrapper = render(<ControlSwitch {...props} />)
+    });
+
+    test('renders', () => {
+      expect(wrapper.baseElement).toMatchSnapshot();
+    });
+
+    test('onChange gets called with input id and value', async () => {
+      await userEvent.click(wrapper.getByTestId('test-switch'));
+      expect(props.onChange).toHaveBeenCalledTimes(1);
+      expect(props.onChange).toHaveBeenCalledWith(true, 'test');
+    });
+  });
+
+  describe('disabled', () => {
+    test('disabled state works', async () => {
+      const props = {
+        id: 'test',
+        label: 'Basic',
+        onChange: jest.fn(),
+        disabled: true
+      };
+
+      const { getByTestId } = render(<ControlSwitch {...props} />)
+      const switchControl = getByTestId('test-switch');
+      await userEvent.click(switchControl);
+      expect(props.onChange).not.toHaveBeenCalled();
+      expect(switchControl).toHaveProperty('disabled', true);
+    });
+  });
+});
diff --git a/src/components/control-switch/control-switch.js b/src/components/control-switch/control-switch.js
deleted file mode 100644
index c14be157..00000000
--- a/src/components/control-switch/control-switch.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import omit from '../utils/omit';
-import ControlWrapper from '../control-wrapper';
-
-const propNames = [
-  'id',
-  'value',
-  'onChange',
-  'label',
-  'optional',
-  'validationError',
-  'themeControlSwitchContainer',
-  'themeControlSwitch',
-  'themeControlWrapper',
-  'themeLabel',
-  // Passed when used with the Form component
-  'initialValue',
-  'validator'
-];
-
-export default class ControlSwitch extends React.Component {
-  static propTypes = {
-    /** Identifying value for input element. */
-    id: PropTypes.string.isRequired,
-    /** Input value */
-    value: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([''])]),
-    /** If provided the text, "(optional)" is appended to the value of the label element. */
-    optional: PropTypes.bool,
-    /** Called during changes to the input element. */
-    onChange: PropTypes.func.isRequired,
-    /** Value passed to the label element. */
-    label: PropTypes.node,
-    /** If provided, the value of this propery displays as an error message. */
-    validationError: PropTypes.node,
-    /** Assembly classes to apply to the switch container */
-    themeControlSwitchContainer: PropTypes.string,
-    /** Assembly classes to apply to the switch element */
-    themeControlSwitch: PropTypes.string,
-    /** Assembly classes to apply to the control wrapper */
-    themeControlWrapper: PropTypes.string,
-    /** Assembly classes to apply to the label element */
-    themeLabel: PropTypes.string
-  };
-
-  onChange = (e) => {
-    return this.props.onChange(e.target.checked, this.props.id);
-  };
-
-  static defaultProps = {
-    value: false,
-    themeControlSwitchContainer: '',
-    themeControlSwitch: 'switch--s-label',
-    optional: false,
-    themeLabel: 'txt-s ml6'
-  };
-
-  render() {
-    const extraProps = omit(this.props, propNames);
-
-    const {
-      id,
-      value,
-      label,
-      validationError,
-      themeControlSwitchContainer,
-      themeControlSwitch,
-      themeControlWrapper,
-      optional,
-      themeLabel
-    } = this.props;
-
-    // value might be an empty string. Form will do this if no initialValue
-    // is set.
-    const checked = value === '' ? false : value;
-
-    const inputProps = {
-      id,
-      checked,
-      onChange: this.onChange,
-      type: 'checkbox',
-      'data-test': `${id}-input`
-    };
-
-    if (validationError) {
-      inputProps['aria-invalid'] = true;
-    }
-
-    return (
-      <ControlWrapper
-        themeControlWrapper={themeControlWrapper}
-        id={id}
-        validationError={validationError}
-      >
-        <label className={`switch-container ${themeControlSwitchContainer}`}>
-          <input {...inputProps} {...extraProps} />
-          <div className={`switch ${themeControlSwitch}`} />
-          <span className={themeLabel}>
-            {label}
-            {optional && <span className="ml3 txt-normal">(optional)</span>}
-          </span>
-        </label>
-      </ControlWrapper>
-    );
-  }
-}
diff --git a/src/components/control-switch/control-switch.tsx b/src/components/control-switch/control-switch.tsx
new file mode 100644
index 00000000..42b3d97e
--- /dev/null
+++ b/src/components/control-switch/control-switch.tsx
@@ -0,0 +1,81 @@
+import React, { ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import ControlWrapper from '../control-wrapper';
+import * as Switch from '@radix-ui/react-switch';
+
+interface Props {
+  id: string,
+  onChange: (checked: boolean, id: string) => void;
+  disabled?: boolean;
+  value?: boolean;
+  label?: ReactElement | string;
+  validationError?: ReactElement | string;
+  themeControlSwitchContainer?: string;
+  themeControlSwitch?: string;
+  themeControlWrapper?: string;
+  themeLabel?: string;
+}
+
+export default function ControlSwitch(props: Props): ReactElement {
+  const {
+    id,
+    onChange,
+    disabled = false,
+    validationError,
+    label,
+    value = false,
+    themeControlWrapper = '',
+    themeControlSwitchContainer = '',
+    themeControlSwitch = 'switch--s-label',
+    themeLabel = 'txt-s ml6'
+  } = props;
+
+  const switchProps = {
+    id,
+    checked: value,
+    disabled,
+    onCheckedChange: (v: boolean) => onChange(v, id),
+    'data-testid': `${id}-switch`
+  };
+
+  return (
+    <ControlWrapper
+      themeControlWrapper={themeControlWrapper}
+      id={id}
+      validationError={validationError}
+    >
+      <fieldset className="flex flex--center-cross">
+        <label htmlFor={id} className={`switch-container ${themeControlSwitchContainer}`}>
+          <Switch.Root {...switchProps} className={`switch ${themeControlSwitch}`}>
+            <Switch.Thumb />
+          </Switch.Root>
+          <span className={themeLabel}>
+            {label}
+          </span>
+        </label>
+      </fieldset>
+    </ControlWrapper>
+  );
+}
+
+ControlSwitch.propTypes = {
+  /** Identifying value for input element. */
+  id: PropTypes.string.isRequired,
+  /** Input value */
+  value: PropTypes.bool,
+  /** Called during changes to the input element. Two arguments are received: 1. The incoming value and 2. the ID of the input. */
+  onChange: PropTypes.func.isRequired,
+  /** Value passed to the label element. */
+  label: PropTypes.node,
+  /** If provided, the value of this propery displays as an error message. */
+  validationError: PropTypes.node,
+  /** Assembly classes to apply to the switch container */
+  themeControlSwitchContainer: PropTypes.string,
+  /** Assembly classes to apply to the switch element */
+  themeControlSwitch: PropTypes.string,
+  /** Assembly classes to apply to the control wrapper */
+  themeControlWrapper: PropTypes.string,
+  /** Assembly classes to apply to the label element */
+  themeLabel: PropTypes.string
+};
+
diff --git a/src/components/control-switch/examples/control-switch-example-basic.js b/src/components/control-switch/examples/control-switch-example-basic.js
deleted file mode 100644
index 4f22125d..00000000
--- a/src/components/control-switch/examples/control-switch-example-basic.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
-Basic.
-*/
-import React from 'react';
-import ControlSwitch from '../control-switch';
-
-export default class Example extends React.Component {
-  render() {
-    return (
-      <ControlSwitch
-        id="active-animal"
-        label="Activate animal"
-        onChange={
-          (/* value, id */) => {
-            /* console.log(value, id); */
-          }
-        }
-      />
-    );
-  }
-}
diff --git a/src/components/control-switch/examples/control-switch-example-basic.tsx b/src/components/control-switch/examples/control-switch-example-basic.tsx
new file mode 100644
index 00000000..8e37e81f
--- /dev/null
+++ b/src/components/control-switch/examples/control-switch-example-basic.tsx
@@ -0,0 +1,18 @@
+/*
+Basic.
+*/
+import React, { ReactElement, useState } from 'react';
+import ControlSwitch from '../control-switch';
+
+export default function Example(): ReactElement {
+  const [value, setValue] = useState(false);
+
+  return (
+    <ControlSwitch
+      id="active-animal"
+      label="Active animal"
+      value={value}
+      onChange={v => setValue(v)}
+    />
+  );
+}
diff --git a/src/components/control-switch/examples/control-switch-example-disabled.tsx b/src/components/control-switch/examples/control-switch-example-disabled.tsx
new file mode 100644
index 00000000..41cf0c58
--- /dev/null
+++ b/src/components/control-switch/examples/control-switch-example-disabled.tsx
@@ -0,0 +1,19 @@
+/*
+Disabled
+*/
+import React, { ReactElement, useState } from 'react';
+import ControlSwitch from '../control-switch';
+
+export default function Example(): ReactElement {
+  const [value, setValue] = useState(false);
+
+  return (
+    <ControlSwitch
+      id="disabled-switch"
+      value={value}
+      disabled={true}
+      onChange={v => setValue(v)}
+    />
+  );
+}
+
diff --git a/src/components/control-switch/examples/control-switch-example-options.tsx b/src/components/control-switch/examples/control-switch-example-options.tsx
new file mode 100644
index 00000000..44bacf35
--- /dev/null
+++ b/src/components/control-switch/examples/control-switch-example-options.tsx
@@ -0,0 +1,30 @@
+/*
+All options.
+*/
+import React, { ReactElement, useState } from 'react';
+import ControlSwitch from '../control-switch';
+
+
+function label(): ReactElement {
+  return (
+    <div className="txt-bold color-purple">Active fancy animal</div>
+  );
+}
+
+export default function Example(): ReactElement {
+  const [error, setError] = useState('');
+
+  return (
+    <ControlSwitch
+      id="fancy-animal"
+      label={label()}
+      validationError={error}
+      value={true}
+      themeControlWrapper="border border--purple px6 py6"
+      themeControlSwitchContainer="bg-pink-faint px12 py6 round"
+      themeControlSwitch="switch--purple switch--s-label"
+      onChange={() => setError("Can't deactivate a fancy animal!")}
+    />
+  );
+}
+
diff --git a/src/components/form/__tests__/__snapshots__/form.test.js.snap b/src/components/form/__tests__/__snapshots__/form.test.js.snap
index 385d5d7b..e11f7978 100644
--- a/src/components/form/__tests__/__snapshots__/form.test.js.snap
+++ b/src/components/form/__tests__/__snapshots__/form.test.js.snap
@@ -185,10 +185,6 @@ exports[`ControlFile all controls renders 1`] = `
             initialValue={false}
             label="Animal active?"
             onChange={[Function]}
-            optional={false}
-            themeControlSwitch="switch--s-label"
-            themeControlSwitchContainer=""
-            themeLabel="txt-s ml6"
             validationError=""
             value={false}
           />
diff --git a/src/docs/index.js b/src/docs/index.js
index 37fb847a..d56312f2 100644
--- a/src/docs/index.js
+++ b/src/docs/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './app';
 import './prism-theme.css';
+import './tmp-mbx-assembly-candidates.css';
 
 const container = document.createElement('div');
 document.body.appendChild(container);
diff --git a/src/docs/tmp-mbx-assembly-candidates.css b/src/docs/tmp-mbx-assembly-candidates.css
new file mode 100644
index 00000000..bf8ab77a
--- /dev/null
+++ b/src/docs/tmp-mbx-assembly-candidates.css
@@ -0,0 +1,152 @@
+/* TODO!! This is a temporary file until https://github.com/mapbox/mbx-assembly/pull/62 is in mbx-assembly and deployed */
+
+:root {
+  --pink: #F141A8;
+  --purple: #A45CE2;
+  --red: #EB1414;
+  --orange: #DD7A08;
+  --yellow: #F3D844;
+  --green: #37AD25;
+  --blue: #4264FB;
+  --gray: #617889;
+  --disabled10: rgba(145, 165, 180, .10);
+  --disabled25: rgba(145, 165, 180, .25);
+  --disabled75: rgba(145, 165, 180, .75);
+  --darken25: rgba(14, 33, 39, 0.25);
+  --darken50: rgba(14, 33, 39, 0.50);
+  --darken75: rgba(14, 33, 39, 0.75);
+}
+
+
+.switch[data-state='checked'] {
+    border-color: transparent;
+    background-color: #757d82;
+}
+
+.switch[data-state='checked']::after {
+    left: 50%;
+    background-color: #fff;
+}
+
+.switch[data-disabled] {
+    border-color: transparent;
+    background-color: rgba(158,163,167,.25);
+    pointer-events: none;
+    color: rgba(26,34,36,.25);
+}
+
+.switch[data-disabled]::after {
+    background-color: rgba(26,34,36,.25);
+}
+.switch--pink[data-state='checked'] {
+  background-color: var(--pink);
+}
+
+.switch--dot-pink[data-state='checked']::after {
+  background-color: var(--pink);
+}
+
+.switch--red[data-state='checked'] {
+  background-color: var(--red);
+}
+
+.switch--dot-red[data-state='checked']::after {
+  background-color: var(--red);
+}
+
+.switch--orange[data-state='checked'] {
+  background-color: var(--orange);
+}
+
+.switch--dot-orange[data-state='checked']::after {
+  background-color: var(--orange);
+}
+
+.switch--yellow[data-state='checked'] {
+  background-color: var(--yellow);
+}
+
+.switch--dot-yellow[data-state='checked']::after {
+  background-color: var(--yellow);
+}
+
+.switch--green[data-state='checked'] {
+  background-color: var(--green);
+}
+
+.switch--dot-green[data-state='checked']::after {
+  background-color: var(--green);
+}
+
+.switch--blue[data-state='checked'] {
+  background-color: var(--blue);
+}
+
+.switch--dot-blue[data-state='checked']::after {
+  background-color: var(--blue);
+}
+
+.switch--purple[data-state='checked'] {
+  background-color: var(--purple);
+}
+
+.switch--dot-purple[data-state='checked']::after {
+  background-color: var(--purple);
+}
+
+.switch--gray[data-state='checked'] {
+  background-color: var(--gray);
+}
+
+.switch--dot-gray[data-state='checked']::after {
+  background-color: var(--gray);
+}
+
+.switch--disabled10[data-state='checked'] {
+  background-color: var(--disabled10);
+}
+
+.switch--dot-disabled10[data-state='checked']::after {
+  background-color: var(--disabled10);
+}
+
+.switch--disabled25[data-state='checked'] {
+  background-color: var(--disabled25);
+}
+
+.switch--dot-disabled25[data-state='checked']::after {
+  background-color: var(--disabled25);
+}
+
+.switch--disabled75[data-state='checked'] {
+  background-color: var(--disabled75);
+}
+
+.switch--dot-disabled75[data-state='checked']::after {
+  background-color: var(--disabled75);
+}
+
+.switch--darken25[data-state='checked'] {
+  background-color: var(--darken25);
+}
+
+.switch--dot-darken25[data-state='checked']::after {
+  background-color: var(--darken25);
+}
+
+.switch--darken50[data-state='checked'] {
+  background-color: var(--darken50);
+}
+
+.switch--dot-darken50[data-state='checked']::after {
+  background-color: var(--darken50);
+}
+
+.switch--darken75[data-state='checked'] {
+  background-color: var(--darken75);
+}
+
+.switch--dot-darken75[data-state='checked']::after {
+  background-color: var(--darken75);
+}
+