From d83b533b5b623c1449cea46fa62ffff9d11b7ff5 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti573@gmail.com>
Date: Tue, 3 Sep 2019 17:40:59 -0400
Subject: [PATCH] feat(togglebox): adds ToggleBox component

---
 package-lock.json                             |  41 +-
 packages/card/README.md                       |   3 +
 packages/card/components/ButtonCard.tsx       |  62 ++
 packages/card/components/Card.tsx             |  21 +-
 packages/card/index.ts                        |   1 +
 packages/card/stories/ButtonCard.stories.tsx  |  26 +
 packages/card/style.ts                        |  79 +-
 packages/card/tests/ButtonCard.test.tsx       |  50 +
 .../__snapshots__/ButtonCard.test.tsx.snap    | 203 ++++
 .../tests/__snapshots__/Card.test.tsx.snap    |   6 +-
 packages/index.ts                             |   3 +-
 packages/toggleBox/README.md                  |  11 +
 packages/toggleBox/components/ToggleBox.tsx   |  31 +
 .../toggleBox/components/ToggleBoxGroup.tsx   |  89 ++
 packages/toggleBox/index.ts                   |   2 +
 .../toggleBox/stories/ToggleBox.stories.tsx   |  53 +
 .../stories/ToggleBoxGroup.stories.tsx        | 163 +++
 .../helpers/ToggleBoxGroupStoryHelper.tsx     |  42 +
 .../stories/helpers/ToggleBoxStoryHelper.tsx  |  42 +
 packages/toggleBox/tests/ToggleBox.test.tsx   |  56 +
 .../toggleBox/tests/ToggleBoxGroup.test.tsx   |  94 ++
 .../__snapshots__/ToggleBox.test.tsx.snap     | 290 ++++++
 .../ToggleBoxGroup.test.tsx.snap              | 963 ++++++++++++++++++
 packages/toggleWrapper/README.md              |   3 +
 .../components/ToggleWrapper.tsx              | 102 ++
 packages/toggleWrapper/index.ts               |   1 +
 .../stories/ToggleWrapper.stories.tsx         |  29 +
 .../tests/ToggleWrapper.test.tsx              |  56 +
 .../__snapshots__/ToggleWrapper.test.tsx.snap |  81 ++
 29 files changed, 2560 insertions(+), 43 deletions(-)
 create mode 100644 packages/card/components/ButtonCard.tsx
 create mode 100644 packages/card/stories/ButtonCard.stories.tsx
 create mode 100644 packages/card/tests/ButtonCard.test.tsx
 create mode 100644 packages/card/tests/__snapshots__/ButtonCard.test.tsx.snap
 create mode 100644 packages/toggleBox/README.md
 create mode 100644 packages/toggleBox/components/ToggleBox.tsx
 create mode 100644 packages/toggleBox/components/ToggleBoxGroup.tsx
 create mode 100644 packages/toggleBox/index.ts
 create mode 100644 packages/toggleBox/stories/ToggleBox.stories.tsx
 create mode 100644 packages/toggleBox/stories/ToggleBoxGroup.stories.tsx
 create mode 100644 packages/toggleBox/stories/helpers/ToggleBoxGroupStoryHelper.tsx
 create mode 100644 packages/toggleBox/stories/helpers/ToggleBoxStoryHelper.tsx
 create mode 100644 packages/toggleBox/tests/ToggleBox.test.tsx
 create mode 100644 packages/toggleBox/tests/ToggleBoxGroup.test.tsx
 create mode 100644 packages/toggleBox/tests/__snapshots__/ToggleBox.test.tsx.snap
 create mode 100644 packages/toggleBox/tests/__snapshots__/ToggleBoxGroup.test.tsx.snap
 create mode 100644 packages/toggleWrapper/README.md
 create mode 100644 packages/toggleWrapper/components/ToggleWrapper.tsx
 create mode 100644 packages/toggleWrapper/index.ts
 create mode 100644 packages/toggleWrapper/stories/ToggleWrapper.stories.tsx
 create mode 100644 packages/toggleWrapper/tests/ToggleWrapper.test.tsx
 create mode 100644 packages/toggleWrapper/tests/__snapshots__/ToggleWrapper.test.tsx.snap

diff --git a/package-lock.json b/package-lock.json
index f8c1a8250..5c00ba9a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12677,8 +12677,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -12699,14 +12698,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -12721,20 +12718,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -12851,8 +12845,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -12864,7 +12857,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -12879,7 +12871,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -12887,14 +12878,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -12913,7 +12902,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -12994,8 +12982,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -13007,7 +12994,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -13093,8 +13079,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -13130,7 +13115,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -13150,7 +13134,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -13194,14 +13177,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/packages/card/README.md b/packages/card/README.md
index 8c7f174af..6a379ec60 100644
--- a/packages/card/README.md
+++ b/packages/card/README.md
@@ -3,3 +3,6 @@ Cards are used to visually group related content. Cards can be used to make it e
 
 ## Aspect ratio
 Sometimes we want a card's size to obey a specific aspect ratio. When an aspect ratio is defined, the card's width and height will always follow that proportion unless the content is too high: in which case the card's height will increase.
+
+## ButtonCard
+A `ButtonCard` component is used to render a card that a user can interact with. It has all of the same properties as a `Card` component, but can also appear in an "on", "off", or "disabled" state.
diff --git a/packages/card/components/ButtonCard.tsx b/packages/card/components/ButtonCard.tsx
new file mode 100644
index 000000000..f8b98b5bf
--- /dev/null
+++ b/packages/card/components/ButtonCard.tsx
@@ -0,0 +1,62 @@
+import Card, { CardProps } from "./Card";
+import {
+  buttonCard,
+  buttonCardActive,
+  buttonCardDisabled,
+  buttonCardDisabledActive,
+  buttonCardFocused,
+  buttonCardFocusedActive
+} from "../style";
+import { cx } from "emotion";
+
+export interface ButtonCardProps extends CardProps {
+  /**
+   * Whether the component should look and act like a disabled element
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component is in the "on" state
+   */
+  isActive?: boolean;
+  /**
+   * Whether the component is controlled by a checkbox or radio input
+   */
+  isInput?: boolean;
+  /**
+   * Whether the component's child input has focus
+   */
+  hasFocus?: boolean;
+}
+
+class ButtonCard extends Card<ButtonCardProps, {}> {
+  public render() {
+    const { isActive, isInput, disabled, hasFocus, ...other } = this.props;
+    const tabIndex = disabled ? -1 : 0;
+    const buttonProps = !isInput
+      ? {
+          tabIndex,
+          role: "button",
+          "aria-disabled": disabled,
+          "aria-pressed": isActive
+        }
+      : {};
+    const buttonCardProps = {
+      ...{ "data-cy": "buttonCard" },
+      ...buttonProps,
+      ...other
+    };
+
+    return this.getCardElement(
+      buttonCardProps,
+      cx(buttonCard, {
+        [buttonCardActive]: isActive,
+        [buttonCardDisabled]: disabled,
+        [buttonCardDisabledActive]: disabled && isActive,
+        [buttonCardFocused]: hasFocus,
+        [buttonCardFocusedActive]: hasFocus && isActive
+      })
+    );
+  }
+}
+
+export default ButtonCard;
diff --git a/packages/card/components/Card.tsx b/packages/card/components/Card.tsx
index 402625d93..9fab7a205 100644
--- a/packages/card/components/Card.tsx
+++ b/packages/card/components/Card.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
-import { style } from "../style";
+import { cardBase } from "../style";
 import { cx } from "emotion";
 import { preserveAspectRatio, padding } from "../../shared/styles/styleUtils";
 import { SpaceSize } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
 
-export interface CardProps {
+export interface CardProps extends React.HTMLProps<HTMLDivElement> {
   /**
    * `[width, height]` Keeps the card's width and height at a specific proportion. e.g.: 2:1 would be [2, 1]
    */
@@ -16,19 +16,30 @@ export interface CardProps {
   children?: React.ReactNode | string;
 }
 
-class Card extends React.PureComponent<CardProps, {}> {
+class Card<P extends CardProps, S extends {}> extends React.PureComponent<
+  P,
+  S
+> {
   public static defaultProps: Partial<CardProps> = {
     paddingSize: "m"
   };
 
   public render() {
-    const { children, aspectRatio, paddingSize } = this.props;
+    return this.getCardElement(this.props);
+  }
+
+  protected getCardElement(cardProps: CardProps, additionalClasses?: string) {
+    const { children, aspectRatio, paddingSize, ...other } = cardProps;
     const aspectRatioStyle = aspectRatio
       ? preserveAspectRatio(aspectRatio[0], aspectRatio[1])
       : null;
 
     return (
-      <div className={cx(style, aspectRatioStyle)} data-cy="card">
+      <div
+        className={cx(cardBase, aspectRatioStyle, additionalClasses)}
+        data-cy="card"
+        {...other}
+      >
         <div className={padding("all", paddingSize)}>{children}</div>
       </div>
     );
diff --git a/packages/card/index.ts b/packages/card/index.ts
index cb57db57f..a4f158160 100644
--- a/packages/card/index.ts
+++ b/packages/card/index.ts
@@ -1 +1,2 @@
 export { default as Card } from "./components/Card";
+export { default as ButtonCard } from "./components/ButtonCard";
diff --git a/packages/card/stories/ButtonCard.stories.tsx b/packages/card/stories/ButtonCard.stories.tsx
new file mode 100644
index 000000000..9c3fc1264
--- /dev/null
+++ b/packages/card/stories/ButtonCard.stories.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import { action } from "@storybook/addon-actions";
+import ButtonCard from "../components/ButtonCard";
+import { SpacingBox } from "../../styleUtils/modifiers";
+
+const readme = require("../README.md");
+
+storiesOf("Card/ButtonCard", module)
+  .addDecorator(withReadme([readme]))
+  .add("default", () => <ButtonCard>default</ButtonCard>)
+  .add("active", () => <ButtonCard isActive={true}>isActive</ButtonCard>)
+  .add("disabled", () => (
+    <React.Fragment>
+      <SpacingBox side="bottom">
+        <ButtonCard disabled={true}>disabled</ButtonCard>
+      </SpacingBox>
+      <ButtonCard disabled={true} isActive={true}>
+        disabled + isActive
+      </ButtonCard>
+    </React.Fragment>
+  ))
+  .add("with onClick", () => (
+    <ButtonCard onClick={action("button clicked")}>default</ButtonCard>
+  ));
diff --git a/packages/card/style.ts b/packages/card/style.ts
index 5e29e819a..6f5892f80 100644
--- a/packages/card/style.ts
+++ b/packages/card/style.ts
@@ -1,13 +1,84 @@
 import { css } from "emotion";
-import { border, borderRadius } from "../shared/styles/styleUtils/index";
-import { themeBgPrimary } from "../design-tokens/build/js/designTokens";
+import { borderRadius } from "../shared/styles/styleUtils/index";
+import {
+  themeBgPrimary,
+  themeBorder,
+  themeBrandPrimary,
+  themeBgDisabled,
+  themeTextColorDisabled,
+  themeBgHover
+} from "../design-tokens/build/js/designTokens";
 
-export const style = css`
+export const cardBase = css`
   background-color: ${themeBgPrimary};
-  ${border("all")};
+  box-shadow: 0 0 0 1px ${themeBorder};
   ${borderRadius("default")};
 
   > div {
     height: 100%;
   }
 `;
+
+const buttonCardFocusStyles = `
+  box-shadow: 0 0 0 1px ${themeBrandPrimary};
+  outline: 0;
+`;
+
+const buttonCardActiveStyles = `
+  box-shadow: 0 0 0 2px ${themeBrandPrimary};
+`;
+
+const buttonCardFocusedActiveStyles = `background-color: ${themeBgHover};`;
+
+export const buttonCard = css`
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    ${buttonCardFocusStyles};
+  }
+
+  &:active {
+    ${buttonCardActiveStyles};
+  }
+`;
+
+export const buttonCardActive = css`
+  &,
+  &:hover,
+  &:focus {
+    ${buttonCardActiveStyles};
+  }
+
+  &:focus {
+    ${buttonCardFocusedActiveStyles};
+  }
+`;
+
+export const buttonCardFocused = css`
+  ${buttonCardFocusStyles};
+`;
+
+export const buttonCardDisabled = css`
+  background-color: ${themeBgDisabled};
+  color: ${themeTextColorDisabled};
+  cursor: auto;
+
+  &,
+  &:hover,
+  &:focus {
+    box-shadow: 0 0 0 0 transparent;
+  }
+`;
+
+export const buttonCardDisabledActive = css`
+  &,
+  &:hover,
+  &:focus {
+    box-shadow: 0 0 0 2px ${themeBorder};
+  }
+`;
+
+export const buttonCardFocusedActive = css`
+  ${buttonCardFocusedActiveStyles};
+`;
diff --git a/packages/card/tests/ButtonCard.test.tsx b/packages/card/tests/ButtonCard.test.tsx
new file mode 100644
index 000000000..f4c37d762
--- /dev/null
+++ b/packages/card/tests/ButtonCard.test.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { mount } from "enzyme";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import toJson from "enzyme-to-json";
+
+import { ButtonCard } from "../";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+describe("ButtonCard", () => {
+  it("renders default", () => {
+    const component = mount(<ButtonCard>default</ButtonCard>);
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  it("renders as isActive", () => {
+    const component = mount(<ButtonCard isActive={true}>default</ButtonCard>);
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  it("renders as disabled", () => {
+    const component = mount(<ButtonCard disabled={true}>default</ButtonCard>);
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  it("renders as hasFocus", () => {
+    const component = mount(<ButtonCard hasFocus={true}>default</ButtonCard>);
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  it("does not pass accessibility props if isInput is true", () => {
+    const accessibilityProps = [
+      "tabIndex",
+      "role",
+      "aria-disabled",
+      "aria-pressed"
+    ];
+    const component = mount(<ButtonCard isInput={true}>default</ButtonCard>);
+    const buttonCardNodeProps = component
+      .find("[data-cy='buttonCard']")
+      .props();
+    const propKeys = Object.keys(buttonCardNodeProps).map(key => key);
+
+    accessibilityProps.forEach(prop => {
+      expect(propKeys.includes(prop)).toBe(false);
+    });
+    // expect(toJson(component)).toMatchSnapshot();
+  });
+});
diff --git a/packages/card/tests/__snapshots__/ButtonCard.test.tsx.snap b/packages/card/tests/__snapshots__/ButtonCard.test.tsx.snap
new file mode 100644
index 000000000..e5ea95fb5
--- /dev/null
+++ b/packages/card/tests/__snapshots__/ButtonCard.test.tsx.snap
@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonCard renders as disabled 1`] = `
+.emotion-0 {
+  padding: 16px;
+}
+
+.emotion-1 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: var(--themeBgDisabled,#E8EAED);
+  color: var(--themeTextColorDisabled,#AEB0B4);
+  cursor: auto;
+}
+
+.emotion-1 > div {
+  height: 100%;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-1:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-1,
+.emotion-1:hover,
+.emotion-1:focus {
+  box-shadow: 0 0 0 0 transparent;
+}
+
+<ButtonCard
+  disabled={true}
+  paddingSize="m"
+>
+  <div
+    aria-disabled={true}
+    className="emotion-1"
+    data-cy="buttonCard"
+    role="button"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0"
+    >
+      default
+    </div>
+  </div>
+</ButtonCard>
+`;
+
+exports[`ButtonCard renders as hasFocus 1`] = `
+.emotion-0 {
+  padding: 16px;
+}
+
+.emotion-1 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-1 > div {
+  height: 100%;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-1:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+<ButtonCard
+  hasFocus={true}
+  paddingSize="m"
+>
+  <div
+    className="emotion-1"
+    data-cy="buttonCard"
+    role="button"
+    tabIndex={0}
+  >
+    <div
+      className="emotion-0"
+    >
+      default
+    </div>
+  </div>
+</ButtonCard>
+`;
+
+exports[`ButtonCard renders as isActive 1`] = `
+.emotion-0 {
+  padding: 16px;
+}
+
+.emotion-1 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-1 > div {
+  height: 100%;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-1:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-1,
+.emotion-1:hover,
+.emotion-1:focus {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-1:focus {
+  background-color: var(--themeBgHover,#F7F8F9);
+}
+
+<ButtonCard
+  isActive={true}
+  paddingSize="m"
+>
+  <div
+    aria-pressed={true}
+    className="emotion-1"
+    data-cy="buttonCard"
+    role="button"
+    tabIndex={0}
+  >
+    <div
+      className="emotion-0"
+    >
+      default
+    </div>
+  </div>
+</ButtonCard>
+`;
+
+exports[`ButtonCard renders default 1`] = `
+.emotion-1 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-1 > div {
+  height: 100%;
+}
+
+.emotion-1:hover,
+.emotion-1:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-1:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-0 {
+  padding: 16px;
+}
+
+<ButtonCard
+  paddingSize="m"
+>
+  <div
+    className="emotion-1"
+    data-cy="buttonCard"
+    role="button"
+    tabIndex={0}
+  >
+    <div
+      className="emotion-0"
+    >
+      default
+    </div>
+  </div>
+</ButtonCard>
+`;
diff --git a/packages/card/tests/__snapshots__/Card.test.tsx.snap b/packages/card/tests/__snapshots__/Card.test.tsx.snap
index d2e3fc51e..02700f2bd 100644
--- a/packages/card/tests/__snapshots__/Card.test.tsx.snap
+++ b/packages/card/tests/__snapshots__/Card.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Card default 1`] = `
 <div
-  class="css-1txfjje"
+  class="css-1whabpp"
   data-cy="card"
 >
   <div
@@ -15,7 +15,7 @@ exports[`Card default 1`] = `
 
 exports[`Card with aspectRatio set 1`] = `
 <div
-  class="css-1jys0p8"
+  class="css-1lk8bu3"
   data-cy="card"
 >
   <div
@@ -28,7 +28,7 @@ exports[`Card with aspectRatio set 1`] = `
 
 exports[`Card with paddingSize set 1`] = `
 <div
-  class="css-1txfjje"
+  class="css-1whabpp"
   data-cy="card"
 >
   <div
diff --git a/packages/index.ts b/packages/index.ts
index fd6855851..3b1cb041c 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -28,7 +28,7 @@ export {
   SuccessDropdownButton,
   DangerDropdownButton
 } from "./button";
-export { Card } from "./card";
+export { ButtonCard, Card } from "./card";
 export { LineChart } from "./chart";
 export { CheckboxInput } from "./checkboxInput";
 export {
@@ -86,6 +86,7 @@ export { Toaster, Toast } from "./toaster";
 export { ToggleContent } from "./toggleContent";
 export { ToggleInput } from "./toggleInput";
 export { ToggleInputList } from "./toggleInputList";
+export { ToggleBox, ToggleBoxGroup } from "./toggleBox";
 export { Tooltip } from "./tooltip";
 export { Typeahead } from "./typeahead";
 export { UIKitThemeProvider } from "./themes";
diff --git a/packages/toggleBox/README.md b/packages/toggleBox/README.md
new file mode 100644
index 000000000..b16464481
--- /dev/null
+++ b/packages/toggleBox/README.md
@@ -0,0 +1,11 @@
+# ToggleBox
+
+## ToggleBox component
+
+A `ToggleBox` is used to indicate whether a group of content is in an "on" or "off" state.
+
+ToggleBoxes are typically rendered in a group with related ToggleBoxes. Engineers can use the `ToggleBoxGroup` component to render a group of ToggleBoxes, or they can manually render a group of ToggleBoxes.
+
+## ToggleBoxGroup component
+
+The `ToggleBoxGroup` component is a shortcut for rendering a group of related ToggleBoxes and reacting to the selection of a `ToggleBox`.
diff --git a/packages/toggleBox/components/ToggleBox.tsx b/packages/toggleBox/components/ToggleBox.tsx
new file mode 100644
index 000000000..92e0a4f62
--- /dev/null
+++ b/packages/toggleBox/components/ToggleBox.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import shortid from "shortid";
+import { ToggleWrapper } from "../../toggleWrapper";
+import { ButtonCard } from "../../card";
+import { ToggleWrapperProps } from "../../toggleWrapper/components/ToggleWrapper";
+
+export interface ToggleBoxProps extends ToggleWrapperProps {
+  children: React.ReactNode;
+}
+
+const ToggleBox = ({
+  children,
+  id = shortid.generate(),
+  disabled = false,
+  ...other
+}) => (
+  <ToggleWrapper disabled={disabled} id={id} {...other}>
+    {({ isActive, hasFocus }) => (
+      <ButtonCard
+        isActive={isActive}
+        isInput={true}
+        hasFocus={hasFocus}
+        disabled={disabled}
+      >
+        {children}
+      </ButtonCard>
+    )}
+  </ToggleWrapper>
+);
+
+export default ToggleBox;
diff --git a/packages/toggleBox/components/ToggleBoxGroup.tsx b/packages/toggleBox/components/ToggleBoxGroup.tsx
new file mode 100644
index 000000000..eab0e869f
--- /dev/null
+++ b/packages/toggleBox/components/ToggleBoxGroup.tsx
@@ -0,0 +1,89 @@
+import * as React from "react";
+import shortid from "shortid";
+import { ToggleBoxProps } from "./ToggleBox";
+import { Flex, FlexItem } from "../../styleUtils/layout";
+import { BreakpointConfig } from "../../shared/styles/breakpoints";
+import { SpaceSize } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
+
+type FlexDirection = BreakpointConfig<React.CSSProperties["flexDirection"]>;
+
+export interface ToggleBoxGroupProps {
+  children: Array<React.ReactElement<ToggleBoxProps>>;
+  /**
+   * The unique identifier for a collection of ToggleBoxes
+   */
+  id?: string;
+  /**
+   * The direction the `ToggleBox` children are laid out in. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
+   */
+  direction?: FlexDirection;
+  /**
+   * The size of the space between each `ToggleBox` child. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
+   */
+  gutterSize?: SpaceSize;
+  /**
+   * Whether multiple ToggleBoxes can be selected
+   */
+  multiSelect?: boolean;
+  /**
+   * An array of selected ToggleBox values
+   */
+  selectedItems?: string[];
+  /**
+   * Callback for when a user makes a selection. Passes an array selected ToggleBox values as a parameter
+   */
+  onChange?: (selectedItems: string[]) => void;
+}
+
+const ToggleBoxGroup = ({
+  children,
+  direction = "row" as FlexDirection,
+  gutterSize = "m" as SpaceSize,
+  id = shortid.generate(),
+  multiSelect,
+  onChange,
+  selectedItems = []
+}: ToggleBoxGroupProps) => {
+  const getSelectedItems = (value, checked) => {
+    if (checked) {
+      return multiSelect ? [...selectedItems, value] : [value];
+    }
+
+    return selectedItems.filter(selectedChoice => selectedChoice !== value);
+  };
+
+  const toggleBoxes = () =>
+    (React.Children.toArray(children) as Array<
+      React.ReactElement<ToggleBoxProps>
+    >).map(toggleBox => {
+      const { name, value, ...childOther } = toggleBox.props;
+      const handleChange = e => {
+        if (onChange) {
+          onChange(getSelectedItems(value, e.target.checked));
+        }
+      };
+
+      delete childOther.onChange;
+
+      return (
+        <FlexItem key={`buttonWrapper-${childOther.id}`}>
+          {React.cloneElement(toggleBox, {
+            name: !multiSelect ? name || id : name,
+            type: multiSelect ? "checkbox" : "radio",
+            onChange: handleChange,
+            isActive: selectedItems.includes(value),
+            id: childOther.id,
+            value,
+            ...childOther
+          })}
+        </FlexItem>
+      );
+    });
+  return (
+    <Flex direction={direction} gutterSize={gutterSize}>
+      {toggleBoxes()}
+    </Flex>
+  );
+};
+
+export default ToggleBoxGroup;
diff --git a/packages/toggleBox/index.ts b/packages/toggleBox/index.ts
new file mode 100644
index 000000000..e4f7d8a0d
--- /dev/null
+++ b/packages/toggleBox/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleBox } from "./components/ToggleBox";
+export { default as ToggleBoxGroup } from "./components/ToggleBoxGroup";
diff --git a/packages/toggleBox/stories/ToggleBox.stories.tsx b/packages/toggleBox/stories/ToggleBox.stories.tsx
new file mode 100644
index 000000000..be03d0cb7
--- /dev/null
+++ b/packages/toggleBox/stories/ToggleBox.stories.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import { ToggleBox } from "../index";
+import ToggleBoxStoryHelper from "./helpers/ToggleBoxStoryHelper";
+
+const readme = require("../README.md");
+
+storiesOf("Forms/ToggleBox", module)
+  .addDecorator(withReadme([readme]))
+  .add("default", () => (
+    <ToggleBoxStoryHelper>
+      {({ isActive, changeHandler }) => (
+        <ToggleBox
+          value="default"
+          id="default"
+          isActive={isActive}
+          onChange={changeHandler}
+        >
+          default
+        </ToggleBox>
+      )}
+    </ToggleBoxStoryHelper>
+  ))
+  .add("isActive", () => (
+    <ToggleBoxStoryHelper isActive={true}>
+      {({ isActive, changeHandler }) => (
+        <ToggleBox
+          value="isActive"
+          id="isActive"
+          isActive={isActive}
+          onChange={changeHandler}
+        >
+          isActive
+        </ToggleBox>
+      )}
+    </ToggleBoxStoryHelper>
+  ))
+  .add("disabled", () => (
+    <ToggleBoxStoryHelper>
+      {({ isActive, changeHandler }) => (
+        <ToggleBox
+          value="disabled"
+          id="disabled"
+          isActive={isActive}
+          onChange={changeHandler}
+          disabled={true}
+        >
+          disabled
+        </ToggleBox>
+      )}
+    </ToggleBoxStoryHelper>
+  ));
diff --git a/packages/toggleBox/stories/ToggleBoxGroup.stories.tsx b/packages/toggleBox/stories/ToggleBoxGroup.stories.tsx
new file mode 100644
index 000000000..27b3cd14d
--- /dev/null
+++ b/packages/toggleBox/stories/ToggleBoxGroup.stories.tsx
@@ -0,0 +1,163 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import { withKnobs, select } from "@storybook/addon-knobs";
+import { ToggleBox, ToggleBoxGroup } from "../index";
+import ToggleBoxGroupStoryHelper from "./helpers/ToggleBoxGroupStoryHelper";
+import { SpaceSize } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
+
+const readme = require("../README.md");
+
+storiesOf("Forms/ToggleBoxGroup", module)
+  .addDecorator(withReadme([readme]))
+  .addDecorator(withKnobs)
+  .add("default", () => (
+    <ToggleBoxGroupStoryHelper>
+      {({ changeHandler, selectedItems }) => (
+        <ToggleBoxGroup
+          onChange={changeHandler}
+          selectedItems={selectedItems}
+          id="default"
+        >
+          <ToggleBox id="exosphere" value="exosphere">
+            Exosphere
+          </ToggleBox>
+          <ToggleBox id="thermosphere" value="thermosphere">
+            Thermosphere
+          </ToggleBox>
+          <ToggleBox id="mesosphere" value="mesosphere">
+            Mesosphere
+          </ToggleBox>
+        </ToggleBoxGroup>
+      )}
+    </ToggleBoxGroupStoryHelper>
+  ))
+  .add("multiSelect", () => (
+    <ToggleBoxGroupStoryHelper>
+      {({ changeHandler, selectedItems }) => (
+        <ToggleBoxGroup
+          onChange={changeHandler}
+          selectedItems={selectedItems}
+          multiSelect={true}
+          id="multiselect"
+        >
+          <ToggleBox id="exosphere" value="exosphere">
+            Exosphere
+          </ToggleBox>
+          <ToggleBox id="thermosphere" value="thermosphere">
+            Thermosphere
+          </ToggleBox>
+          <ToggleBox id="mesosphere" value="mesosphere">
+            Mesosphere
+          </ToggleBox>
+        </ToggleBoxGroup>
+      )}
+    </ToggleBoxGroupStoryHelper>
+  ))
+  .add("with selectedItems", () => (
+    <ToggleBoxGroupStoryHelper selectedItems={["exosphere", "thermosphere"]}>
+      {({ changeHandler, selectedItems }) => (
+        <ToggleBoxGroup
+          onChange={changeHandler}
+          selectedItems={selectedItems}
+          multiSelect={true}
+          id="selectedItems"
+        >
+          <ToggleBox id="exosphere" value="exosphere">
+            Exosphere
+          </ToggleBox>
+          <ToggleBox id="thermosphere" value="thermosphere">
+            Thermosphere
+          </ToggleBox>
+          <ToggleBox id="mesosphere" value="mesosphere">
+            Mesosphere
+          </ToggleBox>
+        </ToggleBoxGroup>
+      )}
+    </ToggleBoxGroupStoryHelper>
+  ))
+  .add(
+    "custom direction",
+    () => {
+      const directions = {
+        column: "column",
+        row: "row",
+        columnReverse: "column-reverse",
+        rowReverse: "row-reverse"
+      };
+      const direction = select("directions", directions, "column");
+
+      return (
+        <ToggleBoxGroupStoryHelper>
+          {({ changeHandler, selectedItems }) => (
+            <ToggleBoxGroup
+              onChange={changeHandler}
+              selectedItems={selectedItems}
+              direction={direction as React.CSSProperties["flexDirection"]}
+              id="columnDirection"
+            >
+              <ToggleBox id="exosphere" value="exosphere">
+                Exosphere
+              </ToggleBox>
+              <ToggleBox id="thermosphere" value="thermosphere">
+                Thermosphere
+              </ToggleBox>
+              <ToggleBox id="mesosphere" value="mesosphere">
+                Mesosphere
+              </ToggleBox>
+            </ToggleBoxGroup>
+          )}
+        </ToggleBoxGroupStoryHelper>
+      );
+    },
+    {
+      info: {
+        text:
+          "Use the knobs panel to customize the direction that the ToggleBoxes are laid out"
+      }
+    }
+  )
+  .add(
+    "custom gutter size",
+    () => {
+      const gutterSizes = {
+        xxs: "xxs",
+        xs: "xs",
+        s: "s",
+        m: "m",
+        l: "l",
+        xl: "xl",
+        xxl: "xxl",
+        none: "none"
+      };
+      const gutterSize = select("gutterSizes", gutterSizes, "xl");
+
+      return (
+        <ToggleBoxGroupStoryHelper>
+          {({ changeHandler, selectedItems }) => (
+            <ToggleBoxGroup
+              onChange={changeHandler}
+              selectedItems={selectedItems}
+              id="default"
+              gutterSize={gutterSize as SpaceSize}
+            >
+              <ToggleBox id="exosphere" value="exosphere">
+                Exosphere
+              </ToggleBox>
+              <ToggleBox id="thermosphere" value="thermosphere">
+                Thermosphere
+              </ToggleBox>
+              <ToggleBox id="mesosphere" value="mesosphere">
+                Mesosphere
+              </ToggleBox>
+            </ToggleBoxGroup>
+          )}
+        </ToggleBoxGroupStoryHelper>
+      );
+    },
+    {
+      info: {
+        text: "Use the knobs panel to customize the spacing between ToggleBoxes"
+      }
+    }
+  );
diff --git a/packages/toggleBox/stories/helpers/ToggleBoxGroupStoryHelper.tsx b/packages/toggleBox/stories/helpers/ToggleBoxGroupStoryHelper.tsx
new file mode 100644
index 000000000..798e00d6b
--- /dev/null
+++ b/packages/toggleBox/stories/helpers/ToggleBoxGroupStoryHelper.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+interface ToggleBoxGroupStoryHelperState {
+  selectedItems: string[];
+}
+
+interface RenderProps {
+  changeHandler: (selectedItems: string[]) => void;
+  selectedItems: string[];
+}
+interface ToggleBoxGroupStoryHelperProps {
+  children: (renderProps: RenderProps) => React.ReactNode;
+  selectedItems?: string[];
+}
+
+class ToggleBoxGroupStoryHelper extends React.PureComponent<
+  ToggleBoxGroupStoryHelperProps,
+  ToggleBoxGroupStoryHelperState
+> {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+
+    this.state = {
+      selectedItems: props.selectedItems || []
+    };
+  }
+
+  public render() {
+    return this.props.children({
+      changeHandler: this.handleChange,
+      selectedItems: this.state.selectedItems
+    });
+  }
+
+  private handleChange(value) {
+    this.setState({ selectedItems: value });
+  }
+}
+
+export default ToggleBoxGroupStoryHelper;
diff --git a/packages/toggleBox/stories/helpers/ToggleBoxStoryHelper.tsx b/packages/toggleBox/stories/helpers/ToggleBoxStoryHelper.tsx
new file mode 100644
index 000000000..2a049470d
--- /dev/null
+++ b/packages/toggleBox/stories/helpers/ToggleBoxStoryHelper.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+interface ToggleBoxStoryHelperState {
+  isActive: boolean;
+}
+
+interface RenderProps {
+  changeHandler?: (event?: React.SyntheticEvent<HTMLInputElement>) => void;
+  isActive?: boolean;
+}
+interface ToggleBoxStoryHelperProps {
+  children: (renderProps: RenderProps) => React.ReactNode;
+  isActive?: boolean;
+}
+
+class ToggleBoxStoryHelper extends React.PureComponent<
+  ToggleBoxStoryHelperProps,
+  ToggleBoxStoryHelperState
+> {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+
+    this.state = {
+      isActive: props.isActive
+    };
+  }
+
+  public render() {
+    return this.props.children({
+      changeHandler: this.handleChange,
+      isActive: this.state.isActive
+    });
+  }
+
+  private handleChange(e) {
+    this.setState({ isActive: e.target.checked });
+  }
+}
+
+export default ToggleBoxStoryHelper;
diff --git a/packages/toggleBox/tests/ToggleBox.test.tsx b/packages/toggleBox/tests/ToggleBox.test.tsx
new file mode 100644
index 000000000..b2ab1f932
--- /dev/null
+++ b/packages/toggleBox/tests/ToggleBox.test.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { mount } from "enzyme";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import toJson from "enzyme-to-json";
+
+import { ToggleBox } from "..";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+describe("ToggleBox", () => {
+  it("renders default", () => {
+    const component = mount(
+      <ToggleBox value="default" id="default">
+        default
+      </ToggleBox>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it("renders active", () => {
+    const component = mount(
+      <ToggleBox isActive={true} value="active" id="active">
+        isActive
+      </ToggleBox>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it("renders disabled", () => {
+    const component = mount(
+      <ToggleBox disabled={true} value="disabled" id="disabled">
+        disabled
+      </ToggleBox>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it("calls onChange prop when the input is changed", () => {
+    const onChangeFn = jest.fn();
+    const component = mount(
+      <ToggleBox value="default" id="default" onChange={onChangeFn}>
+        default
+      </ToggleBox>
+    );
+
+    const toggleBoxInput = component.find("input");
+
+    expect(onChangeFn).not.toHaveBeenCalled();
+    toggleBoxInput.simulate("change", { target: { checked: true } });
+    expect(onChangeFn).toHaveBeenCalled();
+  });
+});
diff --git a/packages/toggleBox/tests/ToggleBoxGroup.test.tsx b/packages/toggleBox/tests/ToggleBoxGroup.test.tsx
new file mode 100644
index 000000000..41dcab8de
--- /dev/null
+++ b/packages/toggleBox/tests/ToggleBoxGroup.test.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import { mount } from "enzyme";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import toJson from "enzyme-to-json";
+
+import { ToggleBox, ToggleBoxGroup } from "..";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+describe("ToggleBoxGroup", () => {
+  it("renders default", () => {
+    const component = mount(
+      <ToggleBoxGroup id="default">
+        <ToggleBox id="exosphere" value="exosphere">
+          Exosphere
+        </ToggleBox>
+        <ToggleBox id="thermosphere" value="thermosphere">
+          Thermosphere
+        </ToggleBox>
+        <ToggleBox id="mesosphere" value="mesosphere">
+          Mesosphere
+        </ToggleBox>
+      </ToggleBoxGroup>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it("renders with a selected ToggleBox", () => {
+    const component = mount(
+      <ToggleBoxGroup id="selectedItems" selectedItems={["mesosphere"]}>
+        <ToggleBox id="exosphere" value="exosphere">
+          Exosphere
+        </ToggleBox>
+        <ToggleBox id="thermosphere" value="thermosphere">
+          Thermosphere
+        </ToggleBox>
+        <ToggleBox id="mesosphere" value="mesosphere">
+          Mesosphere
+        </ToggleBox>
+      </ToggleBoxGroup>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it("renders with custom direction and gutter size", () => {
+    const component = mount(
+      <ToggleBoxGroup
+        id="customLayoutProps"
+        direction="column"
+        gutterSize="xxl"
+      >
+        <ToggleBox id="exosphere" value="exosphere">
+          Exosphere
+        </ToggleBox>
+        <ToggleBox id="thermosphere" value="thermosphere">
+          Thermosphere
+        </ToggleBox>
+        <ToggleBox id="mesosphere" value="mesosphere">
+          Mesosphere
+        </ToggleBox>
+      </ToggleBoxGroup>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it("calls onChange prop with the selected values", () => {
+    const onChangeFn = jest.fn();
+    const component = mount(
+      <ToggleBoxGroup id="onChange" onChange={onChangeFn}>
+        <ToggleBox id="exosphere" value="exosphere">
+          Exosphere
+        </ToggleBox>
+        <ToggleBox id="thermosphere" value="thermosphere">
+          Thermosphere
+        </ToggleBox>
+        <ToggleBox id="mesosphere" value="mesosphere">
+          Mesosphere
+        </ToggleBox>
+      </ToggleBoxGroup>
+    );
+
+    const toggleBoxInput = component.find("input").first();
+
+    expect(onChangeFn).not.toHaveBeenCalled();
+    toggleBoxInput.simulate("change", { target: { checked: true } });
+    expect(onChangeFn).toHaveBeenCalledWith([toggleBoxInput.prop("value")]);
+    toggleBoxInput.simulate("change", { target: { checked: false } });
+    expect(onChangeFn).toHaveBeenCalledWith([]);
+  });
+});
diff --git a/packages/toggleBox/tests/__snapshots__/ToggleBox.test.tsx.snap b/packages/toggleBox/tests/__snapshots__/ToggleBox.test.tsx.snap
new file mode 100644
index 000000000..182b78a34
--- /dev/null
+++ b/packages/toggleBox/tests/__snapshots__/ToggleBox.test.tsx.snap
@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleBox renders active 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-3 {
+  display: block;
+}
+
+.emotion-1 {
+  padding: 16px;
+}
+
+.emotion-2 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-2 > div {
+  height: 100%;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-2:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-2,
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-2:focus {
+  background-color: var(--themeBgHover,#F7F8F9);
+}
+
+<ToggleBox
+  id="active"
+  isActive={true}
+  value="active"
+>
+  <ToggleWrapper
+    disabled={false}
+    id="active"
+    isActive={true}
+    type="checkbox"
+    value="active"
+  >
+    <label
+      className="emotion-3"
+      htmlFor="active"
+    >
+      <input
+        aria-checked={true}
+        checked={true}
+        className="emotion-0"
+        data-cy="toggleWrapper-input"
+        disabled={false}
+        id="active"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        type="checkbox"
+        value="active"
+      />
+      <ButtonCard
+        disabled={false}
+        hasFocus={false}
+        isActive={true}
+        isInput={true}
+        paddingSize="m"
+      >
+        <div
+          className="emotion-2"
+          data-cy="buttonCard"
+        >
+          <div
+            className="emotion-1"
+          >
+            isActive
+          </div>
+        </div>
+      </ButtonCard>
+    </label>
+  </ToggleWrapper>
+</ToggleBox>
+`;
+
+exports[`ToggleBox renders default 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-3 {
+  display: block;
+}
+
+.emotion-2 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-2 > div {
+  height: 100%;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-2:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-1 {
+  padding: 16px;
+}
+
+<ToggleBox
+  id="default"
+  value="default"
+>
+  <ToggleWrapper
+    disabled={false}
+    id="default"
+    type="checkbox"
+    value="default"
+  >
+    <label
+      className="emotion-3"
+      htmlFor="default"
+    >
+      <input
+        className="emotion-0"
+        data-cy="toggleWrapper-input"
+        disabled={false}
+        id="default"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        type="checkbox"
+        value="default"
+      />
+      <ButtonCard
+        disabled={false}
+        hasFocus={false}
+        isInput={true}
+        paddingSize="m"
+      >
+        <div
+          className="emotion-2"
+          data-cy="buttonCard"
+        >
+          <div
+            className="emotion-1"
+          >
+            default
+          </div>
+        </div>
+      </ButtonCard>
+    </label>
+  </ToggleWrapper>
+</ToggleBox>
+`;
+
+exports[`ToggleBox renders disabled 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-3 {
+  display: block;
+}
+
+.emotion-1 {
+  padding: 16px;
+}
+
+.emotion-2 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: var(--themeBgDisabled,#E8EAED);
+  color: var(--themeTextColorDisabled,#AEB0B4);
+  cursor: auto;
+}
+
+.emotion-2 > div {
+  height: 100%;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-2:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-2,
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 0 transparent;
+}
+
+<ToggleBox
+  disabled={true}
+  id="disabled"
+  value="disabled"
+>
+  <ToggleWrapper
+    disabled={true}
+    id="disabled"
+    type="checkbox"
+    value="disabled"
+  >
+    <label
+      className="emotion-3"
+      htmlFor="disabled"
+    >
+      <input
+        className="emotion-0"
+        data-cy="toggleWrapper-input"
+        disabled={true}
+        id="disabled"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        type="checkbox"
+        value="disabled"
+      />
+      <ButtonCard
+        disabled={true}
+        hasFocus={false}
+        isInput={true}
+        paddingSize="m"
+      >
+        <div
+          className="emotion-2"
+          data-cy="buttonCard"
+        >
+          <div
+            className="emotion-1"
+          >
+            disabled
+          </div>
+        </div>
+      </ButtonCard>
+    </label>
+  </ToggleWrapper>
+</ToggleBox>
+`;
diff --git a/packages/toggleBox/tests/__snapshots__/ToggleBoxGroup.test.tsx.snap b/packages/toggleBox/tests/__snapshots__/ToggleBoxGroup.test.tsx.snap
new file mode 100644
index 000000000..653826672
--- /dev/null
+++ b/packages/toggleBox/tests/__snapshots__/ToggleBoxGroup.test.tsx.snap
@@ -0,0 +1,963 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleBoxGroup renders default 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-15 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  height: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 0;
+}
+
+.emotion-15 > div {
+  width: auto;
+}
+
+.emotion-15 > *:not(:first-child) {
+  padding-left: 16px;
+  padding-top: 0;
+}
+
+.emotion-4 {
+  box-sizing: border-box;
+  -webkit-flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  width: auto;
+}
+
+.emotion-3 {
+  display: block;
+}
+
+.emotion-2 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-2 > div {
+  height: 100%;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-2:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-1 {
+  padding: 16px;
+}
+
+<ToggleBoxGroup
+  id="default"
+>
+  <Flex
+    align="flex-start"
+    direction="row"
+    gutterSize="m"
+    justify="flex-start"
+    wrap="nowrap"
+  >
+    <div
+      className="emotion-15"
+      data-cy="flex"
+    >
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-exosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="exosphere"
+            isActive={false}
+            key=".0"
+            name="default"
+            onChange={[Function]}
+            type="radio"
+            value="exosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="exosphere"
+              isActive={false}
+              name="default"
+              onChange={[Function]}
+              type="radio"
+              value="exosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="exosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="exosphere"
+                  name="default"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="exosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Exosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-thermosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="thermosphere"
+            isActive={false}
+            key=".1"
+            name="default"
+            onChange={[Function]}
+            type="radio"
+            value="thermosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="thermosphere"
+              isActive={false}
+              name="default"
+              onChange={[Function]}
+              type="radio"
+              value="thermosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="thermosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="thermosphere"
+                  name="default"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="thermosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Thermosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-mesosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="mesosphere"
+            isActive={false}
+            key=".2"
+            name="default"
+            onChange={[Function]}
+            type="radio"
+            value="mesosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="mesosphere"
+              isActive={false}
+              name="default"
+              onChange={[Function]}
+              type="radio"
+              value="mesosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="mesosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="mesosphere"
+                  name="default"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="mesosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Mesosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+    </div>
+  </Flex>
+</ToggleBoxGroup>
+`;
+
+exports[`ToggleBoxGroup renders with a selected ToggleBox 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-15 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  height: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 0;
+}
+
+.emotion-15 > div {
+  width: auto;
+}
+
+.emotion-15 > *:not(:first-child) {
+  padding-left: 16px;
+  padding-top: 0;
+}
+
+.emotion-4 {
+  box-sizing: border-box;
+  -webkit-flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  width: auto;
+}
+
+.emotion-3 {
+  display: block;
+}
+
+.emotion-2 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-2 > div {
+  height: 100%;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-2:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-1 {
+  padding: 16px;
+}
+
+.emotion-12 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-12 > div {
+  height: 100%;
+}
+
+.emotion-12:hover,
+.emotion-12:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-12:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-12,
+.emotion-12:hover,
+.emotion-12:focus {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-12:focus {
+  background-color: var(--themeBgHover,#F7F8F9);
+}
+
+<ToggleBoxGroup
+  id="selectedItems"
+  selectedItems={
+    Array [
+      "mesosphere",
+    ]
+  }
+>
+  <Flex
+    align="flex-start"
+    direction="row"
+    gutterSize="m"
+    justify="flex-start"
+    wrap="nowrap"
+  >
+    <div
+      className="emotion-15"
+      data-cy="flex"
+    >
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-exosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="exosphere"
+            isActive={false}
+            key=".0"
+            name="selectedItems"
+            onChange={[Function]}
+            type="radio"
+            value="exosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="exosphere"
+              isActive={false}
+              name="selectedItems"
+              onChange={[Function]}
+              type="radio"
+              value="exosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="exosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="exosphere"
+                  name="selectedItems"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="exosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Exosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-thermosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="thermosphere"
+            isActive={false}
+            key=".1"
+            name="selectedItems"
+            onChange={[Function]}
+            type="radio"
+            value="thermosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="thermosphere"
+              isActive={false}
+              name="selectedItems"
+              onChange={[Function]}
+              type="radio"
+              value="thermosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="thermosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="thermosphere"
+                  name="selectedItems"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="thermosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Thermosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-mesosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="mesosphere"
+            isActive={true}
+            key=".2"
+            name="selectedItems"
+            onChange={[Function]}
+            type="radio"
+            value="mesosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="mesosphere"
+              isActive={true}
+              name="selectedItems"
+              onChange={[Function]}
+              type="radio"
+              value="mesosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="mesosphere"
+              >
+                <input
+                  aria-checked={true}
+                  checked={true}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="mesosphere"
+                  name="selectedItems"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="mesosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={true}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-12"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Mesosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+    </div>
+  </Flex>
+</ToggleBoxGroup>
+`;
+
+exports[`ToggleBoxGroup renders with custom direction and gutter size 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-4 {
+  box-sizing: border-box;
+  -webkit-flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  width: auto;
+}
+
+.emotion-3 {
+  display: block;
+}
+
+.emotion-2 {
+  background-color: var(--themeBgPrimary,#FFFFFF);
+  box-shadow: 0 0 0 1px var(--themeBorder,#DADDE2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.emotion-2 > div {
+  height: 100%;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  box-shadow: 0 0 0 1px var(--themeBrandPrimary,#7D58FF);
+  outline: 0;
+}
+
+.emotion-2:active {
+  box-shadow: 0 0 0 2px var(--themeBrandPrimary,#7D58FF);
+}
+
+.emotion-1 {
+  padding: 16px;
+}
+
+.emotion-15 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  height: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 0;
+}
+
+.emotion-15 > div {
+  width: 100%;
+}
+
+.emotion-15 > *:not(:first-child) {
+  padding-left: 0;
+  padding-top: 48px;
+}
+
+<ToggleBoxGroup
+  direction="column"
+  gutterSize="xxl"
+  id="customLayoutProps"
+>
+  <Flex
+    align="flex-start"
+    direction="column"
+    gutterSize="xxl"
+    justify="flex-start"
+    wrap="nowrap"
+  >
+    <div
+      className="emotion-15"
+      data-cy="flex"
+    >
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-exosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="exosphere"
+            isActive={false}
+            key=".0"
+            name="customLayoutProps"
+            onChange={[Function]}
+            type="radio"
+            value="exosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="exosphere"
+              isActive={false}
+              name="customLayoutProps"
+              onChange={[Function]}
+              type="radio"
+              value="exosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="exosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="exosphere"
+                  name="customLayoutProps"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="exosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Exosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-thermosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="thermosphere"
+            isActive={false}
+            key=".1"
+            name="customLayoutProps"
+            onChange={[Function]}
+            type="radio"
+            value="thermosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="thermosphere"
+              isActive={false}
+              name="customLayoutProps"
+              onChange={[Function]}
+              type="radio"
+              value="thermosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="thermosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="thermosphere"
+                  name="customLayoutProps"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="thermosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Thermosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+      <FlexItem
+        flex="grow"
+        key="buttonWrapper-mesosphere"
+      >
+        <div
+          className="emotion-4"
+          data-cy="flexItem"
+        >
+          <ToggleBox
+            id="mesosphere"
+            isActive={false}
+            key=".2"
+            name="customLayoutProps"
+            onChange={[Function]}
+            type="radio"
+            value="mesosphere"
+          >
+            <ToggleWrapper
+              disabled={false}
+              id="mesosphere"
+              isActive={false}
+              name="customLayoutProps"
+              onChange={[Function]}
+              type="radio"
+              value="mesosphere"
+            >
+              <label
+                className="emotion-3"
+                htmlFor="mesosphere"
+              >
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  className="emotion-0"
+                  data-cy="toggleWrapper-input"
+                  disabled={false}
+                  id="mesosphere"
+                  name="customLayoutProps"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="radio"
+                  value="mesosphere"
+                />
+                <ButtonCard
+                  disabled={false}
+                  hasFocus={false}
+                  isActive={false}
+                  isInput={true}
+                  paddingSize="m"
+                >
+                  <div
+                    className="emotion-2"
+                    data-cy="buttonCard"
+                  >
+                    <div
+                      className="emotion-1"
+                    >
+                      Mesosphere
+                    </div>
+                  </div>
+                </ButtonCard>
+              </label>
+            </ToggleWrapper>
+          </ToggleBox>
+        </div>
+      </FlexItem>
+    </div>
+  </Flex>
+</ToggleBoxGroup>
+`;
diff --git a/packages/toggleWrapper/README.md b/packages/toggleWrapper/README.md
new file mode 100644
index 000000000..7fd35abaf
--- /dev/null
+++ b/packages/toggleWrapper/README.md
@@ -0,0 +1,3 @@
+# ToggleWrapper
+
+A `ToggleWrapper` is a utility component that's useful for rendering children differently based on whether the component is in an "on" or "off" state.
diff --git a/packages/toggleWrapper/components/ToggleWrapper.tsx b/packages/toggleWrapper/components/ToggleWrapper.tsx
new file mode 100644
index 000000000..b5f57c442
--- /dev/null
+++ b/packages/toggleWrapper/components/ToggleWrapper.tsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { visuallyHidden, display } from "../../shared/styles/styleUtils";
+
+interface RenderProps {
+  isActive?: boolean;
+  hasFocus?: boolean;
+}
+
+export interface ToggleWrapperProps extends React.HTMLProps<HTMLInputElement> {
+  /**
+   * Whether the component is in the "on" state
+   */
+  isActive?: boolean;
+  /**
+   * The value being toggled
+   */
+  value: string;
+  /**
+   * The unique identifier for the toggle
+   */
+  id: string;
+  /**
+   * The type of boolean input element
+   */
+  type?: "checkbox" | "radio";
+}
+
+interface LocalToggleWrapperProps extends ToggleWrapperProps {
+  children: (renderProps: RenderProps) => React.ReactNode;
+}
+
+interface ToggleWrapperState {
+  hasFocus: boolean;
+}
+
+class ToggleWrapper extends React.PureComponent<
+  LocalToggleWrapperProps,
+  ToggleWrapperState
+> {
+  public static defaultProps: Partial<ToggleWrapperProps> = {
+    type: "checkbox"
+  };
+
+  constructor(props: LocalToggleWrapperProps) {
+    super(props);
+
+    this.state = {
+      hasFocus: false
+    };
+
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+
+  public render() {
+    const { children, id, isActive, ...other } = this.props;
+    const { hasFocus } = this.state;
+    delete other.checked;
+    delete other.className;
+    delete other.onFocus;
+    delete other.onBlur;
+
+    return (
+      // tslint is giving an error because it can't tell that the value of `type`
+      // will be "radio" or "checkbox".
+      // Passing either string directly makes the error go away
+      // tslint:disable react-a11y-role-supports-aria-props
+      <label htmlFor={id} className={display("block")}>
+        <input
+          id={id}
+          className={visuallyHidden}
+          checked={isActive}
+          aria-checked={isActive}
+          data-cy="toggleWrapper-input"
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          {...other}
+        />
+        {children({ isActive, hasFocus })}
+      </label>
+      // tslint:enable
+    );
+  }
+
+  private handleFocus(e) {
+    this.setState({ hasFocus: true });
+
+    if (this.props.onFocus) {
+      this.props.onFocus(e);
+    }
+  }
+
+  private handleBlur(e) {
+    this.setState({ hasFocus: false });
+
+    if (this.props.onBlur) {
+      this.props.onBlur(e);
+    }
+  }
+}
+
+export default ToggleWrapper;
diff --git a/packages/toggleWrapper/index.ts b/packages/toggleWrapper/index.ts
new file mode 100644
index 000000000..9d50f8d09
--- /dev/null
+++ b/packages/toggleWrapper/index.ts
@@ -0,0 +1 @@
+export { default as ToggleWrapper } from "./components/ToggleWrapper";
diff --git a/packages/toggleWrapper/stories/ToggleWrapper.stories.tsx b/packages/toggleWrapper/stories/ToggleWrapper.stories.tsx
new file mode 100644
index 000000000..e912b712c
--- /dev/null
+++ b/packages/toggleWrapper/stories/ToggleWrapper.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import { ToggleWrapper } from "../index";
+
+const readme = require("../README.md");
+
+storiesOf("ToggleWrapper", module)
+  .addDecorator(withReadme([readme]))
+  .add("default", () => (
+    <ToggleWrapper>
+      {({ isActive }) => (
+        <div>
+          the isActive render prop returns:
+          <pre>{`${isActive}`}</pre>
+        </div>
+      )}
+    </ToggleWrapper>
+  ))
+  .add("isActive", () => (
+    <ToggleWrapper isActive={true}>
+      {({ isActive }) => (
+        <div>
+          the isActive render prop returns:
+          <pre>{`${isActive}`}</pre>
+        </div>
+      )}
+    </ToggleWrapper>
+  ));
diff --git a/packages/toggleWrapper/tests/ToggleWrapper.test.tsx b/packages/toggleWrapper/tests/ToggleWrapper.test.tsx
new file mode 100644
index 000000000..db2eb89e5
--- /dev/null
+++ b/packages/toggleWrapper/tests/ToggleWrapper.test.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { mount } from "enzyme";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import toJson from "enzyme-to-json";
+
+import { ToggleWrapper } from "../";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+describe("ToggleWrapper", () => {
+  it("renders", () => {
+    const component = mount(
+      <ToggleWrapper isActive={true}>
+        {({ isActive }) => <div>{`isActive? ${isActive}`}</div>}
+      </ToggleWrapper>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  it("renders as a radio input", () => {
+    const component = mount(
+      <ToggleWrapper type="radio" isActive={true}>
+        {({ isActive }) => <div>{`isActive? ${isActive}`}</div>}
+      </ToggleWrapper>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  it("calls onFocus prop when the input gets focus", () => {
+    const focusFn = jest.fn();
+    const component = mount(
+      <ToggleWrapper isActive={true} onFocus={focusFn}>
+        {({ isActive }) => <div>{`isActive? ${isActive}`}</div>}
+      </ToggleWrapper>
+    );
+
+    expect(focusFn).not.toHaveBeenCalled();
+    component.find("input").simulate("focus");
+    expect(focusFn).toHaveBeenCalled();
+  });
+  it("calls onBlur prop when the input loses focus", () => {
+    const blurFn = jest.fn();
+    const component = mount(
+      <ToggleWrapper isActive={true} onBlur={blurFn}>
+        {({ isActive }) => <div>{`isActive? ${isActive}`}</div>}
+      </ToggleWrapper>
+    );
+
+    expect(blurFn).not.toHaveBeenCalled();
+    component.find("input").simulate("focus");
+    expect(blurFn).not.toHaveBeenCalled();
+    component.find("input").simulate("blur");
+    expect(blurFn).toHaveBeenCalled();
+  });
+});
diff --git a/packages/toggleWrapper/tests/__snapshots__/ToggleWrapper.test.tsx.snap b/packages/toggleWrapper/tests/__snapshots__/ToggleWrapper.test.tsx.snap
new file mode 100644
index 000000000..75ac4f3a9
--- /dev/null
+++ b/packages/toggleWrapper/tests/__snapshots__/ToggleWrapper.test.tsx.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleWrapper renders 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-1 {
+  display: block;
+}
+
+<ToggleWrapper
+  isActive={true}
+  type="checkbox"
+>
+  <label
+    className="emotion-1"
+  >
+    <input
+      aria-checked={true}
+      checked={true}
+      className="emotion-0"
+      data-cy="toggleWrapper-input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="checkbox"
+    />
+    <div>
+      isActive? true
+    </div>
+  </label>
+</ToggleWrapper>
+`;
+
+exports[`ToggleWrapper renders as a radio input 1`] = `
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.emotion-1 {
+  display: block;
+}
+
+<ToggleWrapper
+  isActive={true}
+  type="radio"
+>
+  <label
+    className="emotion-1"
+  >
+    <input
+      aria-checked={true}
+      checked={true}
+      className="emotion-0"
+      data-cy="toggleWrapper-input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      type="radio"
+    />
+    <div>
+      isActive? true
+    </div>
+  </label>
+</ToggleWrapper>
+`;