From aa1388964484e58159096037656897c0448413d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor-baer@users.noreply.github.com>
Date: Fri, 3 Apr 2020 10:46:00 +0200
Subject: [PATCH] feat(components): rewrite Selector components (#560)

* feat(components): rewrite the Selector as radio/checkbox

This makes the Selector component accessible (it wasn't before). It also brings the API inline with
the Checkbox and RadioButton components. Furthermore, it allows for multiple options to be selected.

BREAKING CHANGE:
The Selector component now accepts the onChange, value, name, and checked props. The onClick and
selected props have been removed.

ISSUES CLOSED: #544

* feat(components): increase color contrast on Selector

ISSUES CLOSED: #544

* feat(components): add SelectorGroup component

The SelectorGroup is a convenience component to display multiple, related Selector components in an
accessible way. The component API is modelled after the RadioButtonGroup component, so they can be
used interchangeably.

* fix(components): remove unnecessary attributes from Checkbox and RadioButton labels

The value and name attributes are not valid HTML attributes on the label element.

* feat(components): rename label prop for RadioButtonGroup options

The options that are passed to a RadioButtonGroup should include a children prop instead of a label
prop. This brings it in line with the RadioButton and SelectorGroup components.

BREAKING CHANGE:
The label property of the options prop of the RadioButtonGroup component has been renamed to
children.

* test(components): update storyshots

* refactor(docs): don't persist event unnecessarily
---
 .../__fixtures__/functional-component.js      |   2 +-
 src/__snapshots__/storyshots.spec.js.snap     | 747 ++++++++++++------
 src/components/Checkbox/Checkbox.js           |  23 +-
 src/components/Checkbox/Checkbox.spec.js      |  27 +-
 .../__snapshots__/Checkbox.spec.js.snap       |  10 -
 src/components/RadioButton/RadioButton.js     |  60 +-
 .../__snapshots__/RadioButton.spec.js.snap    |  59 +-
 .../RadioButtonGroup/RadioButtonGroup.js      |  26 +-
 .../RadioButtonGroup/RadioButtonGroup.spec.js |  38 +-
 .../RadioButtonGroup.story.js                 |  22 +-
 .../RadioButtonGroup.spec.js.snap             | 165 +---
 src/components/Selector/Selector.docs.mdx     |  18 +-
 src/components/Selector/Selector.js           | 163 +++-
 src/components/Selector/Selector.spec.js      |  82 +-
 src/components/Selector/Selector.story.js     |  36 +-
 .../__snapshots__/Selector.spec.js.snap       | 250 +++++-
 src/components/SelectorGroup/SelectorGroup.js |  99 +++
 .../SelectorGroup/SelectorGroup.spec.js       |  82 ++
 .../SelectorGroup/SelectorGroup.story.js      |  74 ++
 .../__snapshots__/SelectorGroup.spec.js.snap  | 122 +++
 src/components/SelectorGroup/index.js         |  18 +
 21 files changed, 1555 insertions(+), 568 deletions(-)
 create mode 100644 src/components/SelectorGroup/SelectorGroup.js
 create mode 100644 src/components/SelectorGroup/SelectorGroup.spec.js
 create mode 100644 src/components/SelectorGroup/SelectorGroup.story.js
 create mode 100644 src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap
 create mode 100644 src/components/SelectorGroup/index.js

diff --git a/scripts/static-styles/__fixtures__/functional-component.js b/scripts/static-styles/__fixtures__/functional-component.js
index 9c6b7c575e..d72c737558 100644
--- a/scripts/static-styles/__fixtures__/functional-component.js
+++ b/scripts/static-styles/__fixtures__/functional-component.js
@@ -37,7 +37,7 @@ function FunctionalComponent({ label, value }) {
   const id = 'id';
   return (
     <Wrapper>
-      <Label for={id}>{label}</Label>
+      <Label htmlFor={id}>{label}</Label>
       <Input id={id} value={value} />
     </Wrapper>
   );
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 99ef18db8b..78e3f69c72 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -11118,7 +11118,7 @@ label + .circuit-14 {
     class="circuit-6 circuit-7"
   >
     <span
-      aria-labelledby="progress-bar_40"
+      aria-labelledby="progress-bar_49"
       aria-valuemax="3"
       aria-valuemin="0"
       aria-valuenow="1"
@@ -11129,7 +11129,7 @@ label + .circuit-14 {
     />
     <span
       class="circuit-4 circuit-5"
-      id="progress-bar_40"
+      id="progress-bar_49"
     />
   </div>
   <section>
@@ -14285,8 +14285,6 @@ exports[`Storyshots Forms/Checkbox Base 1`] = `
   <label
     class="circuit-2 circuit-3"
     for="checkbox_2"
-    name="base"
-    value="true"
   >
     Unchecked
     <div
@@ -14415,8 +14413,6 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = `
     class="circuit-2 circuit-3"
     disabled=""
     for="checkbox_4"
-    name="disabled"
-    value="disabled"
   >
     Unchecked
     <div
@@ -14575,8 +14571,6 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = `
   <label
     class="circuit-2 circuit-3"
     for="checkbox_3"
-    name="invalid"
-    value="invalid"
   >
     Unchecked
     <div
@@ -14691,8 +14685,6 @@ HTMLCollection [
     <label
       class="circuit-2 circuit-3"
       for="checkbox_5"
-      name="fruits"
-      value="apples"
     >
       Apples
       <div
@@ -14798,8 +14790,6 @@ HTMLCollection [
     <label
       class="circuit-2 circuit-3"
       for="checkbox_6"
-      name="fruits"
-      value="bananas"
     >
       Bananas
       <div
@@ -14905,8 +14895,6 @@ HTMLCollection [
     <label
       class="circuit-2 circuit-3"
       for="checkbox_7"
-      name="fruits"
-      value="oranges"
     >
       Oranges
       <div
@@ -17790,6 +17778,17 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 <input
     class="circuit-0 circuit-1"
     id="radio-button_29"
@@ -17846,8 +17845,6 @@ HTMLCollection [
 <label
     class="circuit-0 circuit-1"
     for="radio-button_29"
-    name="radio"
-    value="radio"
   >
     Unchecked
   </label>,
@@ -17874,6 +17871,17 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 <input
     class="circuit-0 circuit-1"
     disabled=""
@@ -17950,8 +17958,6 @@ HTMLCollection [
     class="circuit-0 circuit-1"
     disabled=""
     for="radio-button_31"
-    name="disabled"
-    value="disabled"
   >
     Disabled
   </label>,
@@ -17978,6 +17984,17 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 <input
     class="circuit-0 circuit-1"
     id="radio-button_30"
@@ -18042,8 +18059,6 @@ HTMLCollection [
 <label
     class="circuit-0 circuit-1"
     for="radio-button_30"
-    name="invalid"
-    value="invalid"
   >
     Error
   </label>,
@@ -18051,8 +18066,7 @@ HTMLCollection [
 `;
 
 exports[`Storyshots Forms/RadioButton/RadioButtonGroup Base 1`] = `
-HTMLCollection [
-  .circuit-0 {
+.circuit-0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -18070,6 +18084,17 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 .circuit-2 {
   color: #5C656F;
   padding-left: 24px;
@@ -18116,186 +18141,56 @@ HTMLCollection [
   transition: transform 0.05s ease-in,opacity 0.05s ease-in;
 }
 
-<div>
+<div
+  aria-label="Choose your favourite fruit"
+  role="group"
+>
+  <div>
     <input
       class="circuit-0 circuit-1"
       id="radio-button_32"
       name="radio-button-group"
       type="radio"
-      value="First"
+      value="apple"
     />
     <label
       class="circuit-2 circuit-3"
       for="radio-button_32"
-      name="radio-button-group"
-      value="First"
     >
-      Option 1
+      Apple
     </label>
-  </div>,
-  .circuit-0 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
-}
-
-.circuit-2 {
-  color: #5C656F;
-  padding-left: 24px;
-  position: relative;
-}
-
-.circuit-2::before {
-  box-sizing: border-box;
-  height: 16px;
-  width: 16px;
-  box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
-  background-color: #FFFFFF;
-  border: 1px solid #9DA7B1;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  -webkit-transition: border 0.05s ease-in;
-  transition: border 0.05s ease-in;
-}
-
-.circuit-2::after {
-  box-sizing: border-box;
-  height: 8px;
-  width: 8px;
-  background-color: #3388FF;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 4px;
-  -webkit-transform: translateY(-50%) scale(0,0);
-  -ms-transform: translateY(-50%) scale(0,0);
-  transform: translateY(-50%) scale(0,0);
-  opacity: 0;
-  -webkit-transition: -webkit-transform 0.05s ease-in,opacity 0.05s ease-in;
-  -webkit-transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-  transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-}
-
-<div>
+  </div>
+  <div>
     <input
       class="circuit-0 circuit-1"
       id="radio-button_33"
       name="radio-button-group"
       type="radio"
-      value="Second"
+      value="banana"
     />
     <label
       class="circuit-2 circuit-3"
       for="radio-button_33"
-      name="radio-button-group"
-      value="Second"
     >
-      Option 2
+      Banana
     </label>
-  </div>,
-  .circuit-0 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
-}
-
-.circuit-2 {
-  color: #5C656F;
-  padding-left: 24px;
-  position: relative;
-}
-
-.circuit-2::before {
-  box-sizing: border-box;
-  height: 16px;
-  width: 16px;
-  box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
-  background-color: #FFFFFF;
-  border: 1px solid #9DA7B1;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  -webkit-transition: border 0.05s ease-in;
-  transition: border 0.05s ease-in;
-}
-
-.circuit-2::after {
-  box-sizing: border-box;
-  height: 8px;
-  width: 8px;
-  background-color: #3388FF;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 4px;
-  -webkit-transform: translateY(-50%) scale(0,0);
-  -ms-transform: translateY(-50%) scale(0,0);
-  transform: translateY(-50%) scale(0,0);
-  opacity: 0;
-  -webkit-transition: -webkit-transform 0.05s ease-in,opacity 0.05s ease-in;
-  -webkit-transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-  transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-}
-
-<div>
+  </div>
+  <div>
     <input
       class="circuit-0 circuit-1"
       id="radio-button_34"
       name="radio-button-group"
       type="radio"
-      value="Third"
+      value="mango"
     />
     <label
       class="circuit-2 circuit-3"
       for="radio-button_34"
-      name="radio-button-group"
-      value="Third"
     >
-      Option 3
+      Mango
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`Storyshots Forms/Select Base 1`] = `
@@ -18608,92 +18503,502 @@ exports[`Storyshots Forms/Select With Prefix 1`] = `
 `;
 
 exports[`Storyshots Forms/Selector Base 1`] = `
-HTMLCollection [
-  .circuit-0 {
-  cursor: pointer;
-  padding: 24px;
-  border-radius: 5px;
-  border: 1px solid #D8DDE1;
-  background-color: #FFFFFF;
+.circuit-4 {
+  position: relative;
   margin-bottom: 16px;
-  border: 2px solid #3388FF;
+}
+
+.circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
   background-color: #EDF4FC;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
 }
 
-<div
-    aria-selected="true"
-    class="circuit-0 circuit-1"
-  >
-    Select me!
-  </div>,
-  .circuit-0 {
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
   cursor: pointer;
   padding: 24px;
   border-radius: 5px;
-  border: 1px solid #D8DDE1;
   background-color: #FFFFFF;
-  margin-bottom: 16px;
+  text-align: center;
 }
 
-.circuit-0:hover {
-  border: 2px solid #D8DDE1;
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
   background-color: #FAFBFC;
 }
 
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
 <div
-    aria-selected="false"
+  class="circuit-4 circuit-5"
+>
+  <input
     class="circuit-0 circuit-1"
+    id="selector_40"
+    type="radio"
+    value=""
+  />
+  <label
+    class="circuit-2 circuit-3"
+    for="selector_40"
   >
     Select me!
-  </div>,
-]
+  </label>
+</div>
 `;
 
 exports[`Storyshots Forms/Selector Disabled 1`] = `
+.circuit-4 {
+  position: relative;
+  margin-bottom: 16px;
+}
+
 .circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
   cursor: pointer;
   padding: 24px;
   border-radius: 5px;
-  border: 1px solid #D8DDE1;
   background-color: #FFFFFF;
-  margin-bottom: 16px;
+  text-align: center;
   color: #9DA7B1;
   cursor: default;
   pointer-events: none;
 }
 
-.circuit-0:hover {
-  border: 2px solid #D8DDE1;
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
   background-color: #FAFBFC;
 }
 
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
+.circuit-2::before {
+  border-color: #D8DDE1;
+}
+
 <div
-  class="circuit-0 circuit-1"
-  disabled=""
+  class="circuit-4 circuit-5"
 >
-  I cannot be selected
+  <input
+    class="circuit-0 circuit-1"
+    disabled=""
+    id="selector_42"
+    type="radio"
+    value=""
+  />
+  <label
+    class="circuit-2 circuit-3"
+    disabled=""
+    for="selector_42"
+  >
+    I cannot be selected
+  </label>
 </div>
 `;
 
 exports[`Storyshots Forms/Selector Selected 1`] = `
+.circuit-4 {
+  position: relative;
+  margin-bottom: 16px;
+}
+
 .circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
   cursor: pointer;
   padding: 24px;
   border-radius: 5px;
-  border: 1px solid #D8DDE1;
   background-color: #FFFFFF;
+  text-align: center;
+}
+
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
+<div
+  class="circuit-4 circuit-5"
+>
+  <input
+    checked=""
+    class="circuit-0 circuit-1"
+    id="selector_41"
+    type="radio"
+    value=""
+  />
+  <label
+    class="circuit-2 circuit-3"
+    for="selector_41"
+  >
+    I am selected!
+  </label>
+</div>
+`;
+
+exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = `
+.circuit-4 {
+  position: relative;
   margin-bottom: 16px;
+}
+
+.circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
   border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
+  cursor: pointer;
+  padding: 24px;
+  border-radius: 5px;
+  background-color: #FFFFFF;
+  text-align: center;
+}
+
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
+<div
+  aria-label="Choose your favourite fruit"
+  role="group"
+>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_43"
+      name="selector-group"
+      type="radio"
+      value="apple"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_43"
+    >
+      Apple
+    </label>
+  </div>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_44"
+      name="selector-group"
+      type="radio"
+      value="banana"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_44"
+    >
+      Banana
+    </label>
+  </div>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_45"
+      name="selector-group"
+      type="radio"
+      value="mango"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_45"
+    >
+      Mango
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = `
+.circuit-4 {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
   background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
   box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
+  cursor: pointer;
+  padding: 24px;
+  border-radius: 5px;
+  background-color: #FFFFFF;
+  text-align: center;
+}
+
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
 }
 
 <div
-  aria-selected="true"
-  class="circuit-0 circuit-1"
+  aria-label="Choose your favourite fruit"
+  role="group"
 >
-  I am selected!
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_46"
+      name="selector-group"
+      type="checkbox"
+      value="apple"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_46"
+    >
+      Apple
+    </label>
+  </div>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_47"
+      name="selector-group"
+      type="checkbox"
+      value="banana"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_47"
+    >
+      Banana
+    </label>
+  </div>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_48"
+      name="selector-group"
+      type="checkbox"
+      value="mango"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_48"
+    >
+      Mango
+    </label>
+  </div>
 </div>
 `;
 
@@ -18779,7 +19084,7 @@ label + .circuit-4 {
 
 <label
   class="circuit-6 circuit-7"
-  for="41"
+  for="50"
 >
   Label
   <div
@@ -18788,7 +19093,7 @@ label + .circuit-4 {
     <textarea
       aria-invalid="false"
       class="circuit-0 circuit-1"
-      id="41"
+      id="50"
       placeholder="Write your text here..."
     />
     <div
@@ -18870,7 +19175,7 @@ label + .circuit-2 {
 
 <label
   class="circuit-4 circuit-5"
-  for="45"
+  for="54"
 >
   Label
   <div
@@ -18881,7 +19186,7 @@ label + .circuit-2 {
       aria-invalid="false"
       class="circuit-0 circuit-1"
       disabled=""
-      id="45"
+      id="54"
       placeholder="Write your text here..."
     >
       You cannot edit the text because the textarea is disabled
@@ -19040,7 +19345,7 @@ label + .circuit-7 {
 
 <label
   class="circuit-9 circuit-10"
-  for="42"
+  for="51"
 >
   Label
   <div
@@ -19049,7 +19354,7 @@ label + .circuit-7 {
     <textarea
       aria-invalid="true"
       class="circuit-0 circuit-1"
-      id="42"
+      id="51"
       placeholder="Write your text here..."
     />
     <div
@@ -19156,7 +19461,7 @@ label + .circuit-4 {
 
 <label
   class="circuit-6 circuit-7"
-  for="44"
+  for="53"
 >
   Label
   <div
@@ -19165,7 +19470,7 @@ label + .circuit-4 {
     <textarea
       aria-invalid="false"
       class="circuit-0 circuit-1"
-      id="44"
+      id="53"
       placeholder="Write your text here..."
     />
     <div
@@ -19325,7 +19630,7 @@ label + .circuit-7 {
 
 <label
   class="circuit-9 circuit-10"
-  for="43"
+  for="52"
 >
   Label
   <div
@@ -19334,7 +19639,7 @@ label + .circuit-7 {
     <textarea
       aria-invalid="false"
       class="circuit-0 circuit-1"
-      id="43"
+      id="52"
       placeholder="Write your text here..."
     />
     <div
@@ -19449,9 +19754,9 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
 >
   <button
     aria-checked="false"
-    aria-labelledby="toggle-label_47"
+    aria-labelledby="toggle-label_56"
     class="circuit-4 circuit-5"
-    id="toggle-switch_46"
+    id="toggle-switch_55"
     role="switch"
     type="button"
   >
@@ -19466,8 +19771,8 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
   </button>
   <label
     class="circuit-9 circuit-10"
-    for="toggle-switch_46"
-    id="toggle-label_47"
+    for="toggle-switch_55"
+    id="toggle-label_56"
   >
     <p
       class=" circuit-6 circuit-7 circuit-8"
@@ -19587,9 +19892,9 @@ exports[`Storyshots Forms/Toggle With Explanation 1`] = `
 >
   <button
     aria-checked="false"
-    aria-labelledby="toggle-label_49"
+    aria-labelledby="toggle-label_58"
     class="circuit-4 circuit-5"
-    id="toggle-switch_48"
+    id="toggle-switch_57"
     role="switch"
     type="button"
   >
@@ -19604,8 +19909,8 @@ exports[`Storyshots Forms/Toggle With Explanation 1`] = `
   </button>
   <label
     class="circuit-12 circuit-13"
-    for="toggle-switch_48"
-    id="toggle-label_49"
+    for="toggle-switch_57"
+    id="toggle-label_58"
   >
     <p
       class=" circuit-6 circuit-7 circuit-8"
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index fa75ee9f98..9384204d06 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -151,7 +151,9 @@ const CheckboxTooltip = styled(Tooltip)`
  */
 const Checkbox = ({
   children,
+  value,
   id: customId,
+  name,
   disabled,
   validationHint,
   className,
@@ -160,7 +162,14 @@ const Checkbox = ({
   const id = customId || uniqueId('checkbox_');
   return (
     <CheckboxWrapper className={className}>
-      <CheckboxInput {...props} id={id} type="checkbox" disabled={disabled} />
+      <CheckboxInput
+        {...props}
+        id={id}
+        name={name}
+        value={value}
+        type="checkbox"
+        disabled={disabled}
+      />
       <CheckboxLabel {...props} htmlFor={id} disabled={disabled}>
         {children}
         <CheckedIcon aria-hidden="true" />
@@ -182,19 +191,19 @@ Checkbox.propTypes = {
   /**
    * Value string for input.
    */
-  value: PropTypes.string,
+  value: PropTypes.string.isRequired,
   /**
    * Child nodes to be rendered as the label.
    */
-  children: childrenPropType,
-  /**
-   * A unique ID used to link the input and label.
-   */
-  id: PropTypes.string,
+  children: childrenPropType.isRequired,
   /**
    * The name of the checkbox.
    */
   name: PropTypes.string.isRequired,
+  /**
+   * A unique ID used to link the input and label.
+   */
+  id: PropTypes.string,
   /**
    * Triggers checked styles on the component. This is also forwarded as
    * attribute to the <input> element.
diff --git a/src/components/Checkbox/Checkbox.spec.js b/src/components/Checkbox/Checkbox.spec.js
index 84d681d3b6..ba9e1fc59f 100644
--- a/src/components/Checkbox/Checkbox.spec.js
+++ b/src/components/Checkbox/Checkbox.spec.js
@@ -17,39 +17,38 @@ import React from 'react';
 
 import Checkbox from '.';
 
-const name = 'name';
-const onChange = jest.fn();
+const defaultProps = {
+  name: 'name',
+  onChange: jest.fn()
+};
 
 describe('Checkbox', () => {
   /**
    * Style tests.
    */
   it('should render with default styles', () => {
-    const actual = create(<Checkbox {...{ name, onChange }} />);
+    const actual = create(<Checkbox {...defaultProps} />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with checked styles when passed the checked prop', () => {
-    const actual = create(<Checkbox checked {...{ name, onChange }} />);
+    const actual = create(<Checkbox checked {...defaultProps} />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with disabled styles when passed the disabled prop', () => {
-    const actual = create(<Checkbox disabled {...{ name, onChange }} />);
+    const actual = create(<Checkbox disabled {...defaultProps} />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with invalid styles when passed the invalid prop', () => {
-    const actual = create(<Checkbox invalid {...{ name, onChange }} />);
+    const actual = create(<Checkbox invalid {...defaultProps} />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with a tooltip when passed a validation hint', () => {
     const actual = create(
-      <Checkbox
-        validationHint="This field is required."
-        {...{ name, onChange }}
-      />
+      <Checkbox validationHint="This field is required." {...defaultProps} />
     );
     expect(actual).toMatchSnapshot();
   });
@@ -59,7 +58,7 @@ describe('Checkbox', () => {
    */
   it('should be unchecked by default', () => {
     const { getByLabelText } = render(
-      <Checkbox {...{ name, onChange }}>Label</Checkbox>
+      <Checkbox {...defaultProps}>Label</Checkbox>
     );
     const inputEl = getByLabelText('Label', {
       exact: false
@@ -69,7 +68,7 @@ describe('Checkbox', () => {
 
   it('should call the change handler when clicked', () => {
     const { getByLabelText } = render(
-      <Checkbox {...{ name, onChange }}>Label</Checkbox>
+      <Checkbox {...defaultProps}>Label</Checkbox>
     );
     const inputEl = getByLabelText('Label', {
       exact: false
@@ -79,7 +78,7 @@ describe('Checkbox', () => {
       fireEvent.click(inputEl);
     });
 
-    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
   });
 
   /**
@@ -88,7 +87,7 @@ describe('Checkbox', () => {
   it('should meet accessibility guidelines', async () => {
     const wrapper = renderToHtml(
       <div>
-        <Checkbox {...{ name, onChange }}>Label</Checkbox>
+        <Checkbox {...defaultProps}>Label</Checkbox>
       </div>
     );
     const actual = await axe(wrapper);
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap
index 3ac6655f8a..298f11dedd 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap
@@ -138,8 +138,6 @@ exports[`Checkbox should render with a tooltip when passed a validation hint 1`]
   <label
     class="circuit-2 circuit-3"
     for="checkbox_5"
-    name="name"
-    value=""
   >
     <div
       aria-hidden="true"
@@ -253,8 +251,6 @@ exports[`Checkbox should render with checked styles when passed the checked prop
   <label
     class="circuit-2 circuit-3"
     for="checkbox_2"
-    name="name"
-    value=""
   >
     <div
       aria-hidden="true"
@@ -362,8 +358,6 @@ exports[`Checkbox should render with default styles 1`] = `
   <label
     class="circuit-2 circuit-3"
     for="checkbox_1"
-    name="name"
-    value=""
   >
     <div
       aria-hidden="true"
@@ -491,8 +485,6 @@ exports[`Checkbox should render with disabled styles when passed the disabled pr
     class="circuit-2 circuit-3"
     disabled=""
     for="checkbox_3"
-    name="name"
-    value=""
   >
     <div
       aria-hidden="true"
@@ -609,8 +601,6 @@ exports[`Checkbox should render with invalid styles when passed the invalid prop
   <label
     class="circuit-2 circuit-3"
     for="checkbox_4"
-    name="name"
-    value=""
   >
     <div
       aria-hidden="true"
diff --git a/src/components/RadioButton/RadioButton.js b/src/components/RadioButton/RadioButton.js
index 3b8f7d0879..e8cd331d61 100644
--- a/src/components/RadioButton/RadioButton.js
+++ b/src/components/RadioButton/RadioButton.js
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
@@ -61,21 +61,6 @@ const labelBaseStyles = ({ theme }) => css`
   }
 `;
 
-const labelCheckedStyles = ({ theme, checked }) =>
-  checked &&
-  css`
-    label: radio-button--active;
-
-    &::before {
-      border-color: ${theme.colors.p500};
-    }
-
-    &::after {
-      transform: translateY(-50%) scale(1, 1);
-      opacity: 1;
-    }
-  `;
-
 const labelInvalidStyles = ({ theme, invalid }) =>
   invalid &&
   css`
@@ -115,6 +100,17 @@ const inputStyles = ({ theme }) => css`
     border-width: 2px;
     border-color: ${theme.colors.p500};
   }
+
+  &:checked + label {
+    &::before {
+      border-color: ${theme.colors.p500};
+    }
+
+    &::after {
+      transform: translateY(-50%) scale(1, 1);
+      opacity: 1;
+    }
+  }
 `;
 
 const RadioButtonInput = styled('input')`
@@ -123,7 +119,6 @@ const RadioButtonInput = styled('input')`
 
 const RadioButtonLabel = styled('label')`
   ${labelBaseStyles};
-  ${labelCheckedStyles};
   ${labelDisabledStyles};
   ${labelInvalidStyles};
 `;
@@ -131,20 +126,31 @@ const RadioButtonLabel = styled('label')`
 /**
  * RadioButton component for forms.
  */
-const RadioButton = ({ onChange, children, id, ...props }) => {
+const RadioButton = ({
+  onChange,
+  children,
+  id,
+  name,
+  value,
+  checked,
+  ...props
+}) => {
   const inputId = id || uniqueId('radio-button_');
   return (
-    <Fragment>
+    <>
       <RadioButtonInput
         {...props}
         type="radio"
-        onClick={onChange}
+        name={name}
         id={inputId}
+        value={value}
+        checked={checked}
+        onClick={onChange}
       />
       <RadioButtonLabel {...props} htmlFor={inputId}>
         {children}
       </RadioButtonLabel>
-    </Fragment>
+    </>
   );
 };
 
@@ -152,7 +158,7 @@ RadioButton.propTypes = {
   /**
    * Callback used when the user toggles the radio button.
    */
-  onChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
   /**
    * Value string for input.
    */
@@ -160,15 +166,15 @@ RadioButton.propTypes = {
   /**
    * Child nodes to be rendered as the label.
    */
-  children: childrenPropType,
-  /**
-   * A unique ID used to link the input and label.
-   */
-  id: PropTypes.string,
+  children: childrenPropType.isRequired,
   /**
    * The name of the radio group that the radio button belongs to.
    */
   name: PropTypes.string.isRequired,
+  /**
+   * A unique ID used to link the input and label.
+   */
+  id: PropTypes.string,
   /**
    * Triggers checked styles on the component. This is also forwarded as
    * attribute to the <input> element.
diff --git a/src/components/RadioButton/__snapshots__/RadioButton.spec.js.snap b/src/components/RadioButton/__snapshots__/RadioButton.spec.js.snap
index 905419e9ca..5dd8eeed2e 100644
--- a/src/components/RadioButton/__snapshots__/RadioButton.spec.js.snap
+++ b/src/components/RadioButton/__snapshots__/RadioButton.spec.js.snap
@@ -20,11 +20,23 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 <input
     checked=""
     class="circuit-0 circuit-1"
     id="radio-button_2"
     type="radio"
+    value=""
   />,
   .circuit-0 {
   color: #5C656F;
@@ -72,17 +84,6 @@ HTMLCollection [
   transition: transform 0.05s ease-in,opacity 0.05s ease-in;
 }
 
-.circuit-0::before {
-  border-color: #3388FF;
-}
-
-.circuit-0::after {
-  -webkit-transform: translateY(-50%) scale(1,1);
-  -ms-transform: translateY(-50%) scale(1,1);
-  transform: translateY(-50%) scale(1,1);
-  opacity: 1;
-}
-
 <label
     class="circuit-0 circuit-1"
     for="radio-button_2"
@@ -110,10 +111,22 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 <input
     class="circuit-0 circuit-1"
     id="radio-button_1"
     type="radio"
+    value=""
   />,
   .circuit-0 {
   color: #5C656F;
@@ -188,11 +201,23 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 <input
     class="circuit-0 circuit-1"
     disabled=""
     id="radio-button_3"
     type="radio"
+    value=""
   />,
   .circuit-0 {
   color: #5C656F;
@@ -286,10 +311,22 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 <input
     class="circuit-0 circuit-1"
     id="radio-button_4"
     type="radio"
+    value=""
   />,
   .circuit-0 {
   color: #5C656F;
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.js b/src/components/RadioButtonGroup/RadioButtonGroup.js
index e55375be04..1455fe4529 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.js
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.js
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { uniqueId } from '../../util/id';
@@ -27,36 +27,38 @@ const RadioButtonGroup = ({
   options,
   onChange,
   value: activeValue,
-  name: customName
+  name: customName,
+  label,
+  ...props
 }) => {
   const name = customName || uniqueId('radio-button-group_');
   return (
-    <Fragment>
+    <div role="group" aria-label={label} {...props}>
       {options &&
-        options.map(({ label, value, className, ...props }) => (
+        options.map(({ children, value, className, ...rest }) => (
           <div key={value} className={className}>
             <RadioButton
-              {...{ ...props, value, name, onChange }}
+              {...{ ...rest, value, name, onChange }}
               checked={value === activeValue}
             >
-              {label}
+              {children}
             </RadioButton>
           </div>
         ))}
-    </Fragment>
+    </div>
   );
 };
 
 RadioButtonGroup.propTypes = {
   /**
    * A collection of available options. Each option must have at least
-   * a value and label.
+   * a value and children.
    */
   options: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
         .isRequired,
-      label: PropTypes.string.isRequired,
+      children: PropTypes.string.isRequired,
       disabled: PropTypes.bool
     })
   ).isRequired,
@@ -71,7 +73,11 @@ RadioButtonGroup.propTypes = {
   /**
    * A unique name for the radio group.
    */
-  name: PropTypes.string
+  name: PropTypes.string,
+  /**
+   * A visually hidden description of the selector group for screen readers.
+   */
+  label: PropTypes.string
 };
 
 RadioButtonGroup.defaultProps = {
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.spec.js b/src/components/RadioButtonGroup/RadioButtonGroup.spec.js
index d7543c8d5c..f4973bc238 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.spec.js
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.spec.js
@@ -20,15 +20,15 @@ import RadioButtonGroup from '.';
 describe('RadioButtonGroup', () => {
   const options = [
     {
-      label: 'Option 1',
+      children: 'Option 1',
       value: 'first'
     },
     {
-      label: 'Option 2',
+      children: 'Option 2',
       value: 'second'
     },
     {
-      label: 'Option 3',
+      children: 'Option 3',
       value: 'third'
     }
   ];
@@ -41,24 +41,10 @@ describe('RadioButtonGroup', () => {
     expect(actual).toMatchSnapshot();
   });
 
-  /**
-   * Accessibility tests.
-   */
-  it('should meet accessibility guidelines', async () => {
-    const value = 'second';
-    const wrapper = renderToHtml(
-      <div role="group" aria-label="Choose your favourite option">
-        <RadioButtonGroup options={options} value={value} />
-      </div>
-    );
-    const actual = await axe(wrapper);
-    expect(actual).toHaveNoViolations();
-  });
-
   /**
    * Logic tests.
    */
-  it('should check the currently active RadioButton', () => {
+  it('should check the selected option', () => {
     const value = 'second';
     const { getByLabelText } = render(
       <RadioButtonGroup options={options} value={value} />
@@ -67,4 +53,20 @@ describe('RadioButtonGroup', () => {
     expect(getByLabelText('Option 2')).toHaveAttribute('checked');
     expect(getByLabelText('Option 3')).not.toHaveAttribute('checked');
   });
+
+  /**
+   * Accessibility tests.
+   */
+  it('should meet accessibility guidelines', async () => {
+    const value = 'second';
+    const wrapper = renderToHtml(
+      <RadioButtonGroup
+        options={options}
+        value={value}
+        label="Choose your favourite option"
+      />
+    );
+    const actual = await axe(wrapper);
+    expect(actual).toHaveNoViolations();
+  });
 });
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.story.js b/src/components/RadioButtonGroup/RadioButtonGroup.story.js
index 3829ab3547..56420fc2a8 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.story.js
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.story.js
@@ -27,16 +27,16 @@ export default {
 
 const options = [
   {
-    label: 'Option 1',
-    value: 'First'
+    children: 'Apple',
+    value: 'apple'
   },
   {
-    label: 'Option 2',
-    value: 'Second'
+    children: 'Banana',
+    value: 'banana'
   },
   {
-    label: 'Option 3',
-    value: 'Third'
+    children: 'Mango',
+    value: 'mango'
   }
 ];
 
@@ -44,10 +44,16 @@ const options = [
 const RadioButtonGroupWithState = ({ value: initial, children, ...props }) => {
   const [value, setValue] = useState(initial);
   const handleChange = e => {
-    e.persist();
     setValue(e.target.value);
   };
-  return <RadioButtonGroup {...props} value={value} onChange={handleChange} />;
+  return (
+    <RadioButtonGroup
+      {...props}
+      value={value}
+      onChange={handleChange}
+      label="Choose your favourite fruit"
+    />
+  );
 };
 
 export const base = () => (
diff --git a/src/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.js.snap b/src/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.js.snap
index 4cdd3dcb75..aede6b4775 100644
--- a/src/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.js.snap
+++ b/src/components/RadioButtonGroup/__snapshots__/RadioButtonGroup.spec.js.snap
@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RadioButtonGroup should render with default styles 1`] = `
-HTMLCollection [
-  .circuit-0 {
+.circuit-0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -20,6 +19,17 @@ HTMLCollection [
   border-color: #3388FF;
 }
 
+.circuit-0:checked + label::before {
+  border-color: #3388FF;
+}
+
+.circuit-0:checked + label::after {
+  -webkit-transform: translateY(-50%) scale(1,1);
+  -ms-transform: translateY(-50%) scale(1,1);
+  transform: translateY(-50%) scale(1,1);
+  opacity: 1;
+}
+
 .circuit-2 {
   color: #5C656F;
   padding-left: 24px;
@@ -66,7 +76,10 @@ HTMLCollection [
   transition: transform 0.05s ease-in,opacity 0.05s ease-in;
 }
 
-<div>
+<div
+  role="group"
+>
+  <div>
     <input
       class="circuit-0 circuit-1"
       id="radio-button_2"
@@ -77,77 +90,11 @@ HTMLCollection [
     <label
       class="circuit-2 circuit-3"
       for="radio-button_2"
-      name="radio-button-group_1"
-      value="first"
     >
       Option 1
     </label>
-  </div>,
-  .circuit-0 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
-}
-
-.circuit-2 {
-  color: #5C656F;
-  padding-left: 24px;
-  position: relative;
-}
-
-.circuit-2::before {
-  box-sizing: border-box;
-  height: 16px;
-  width: 16px;
-  box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
-  background-color: #FFFFFF;
-  border: 1px solid #9DA7B1;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  -webkit-transition: border 0.05s ease-in;
-  transition: border 0.05s ease-in;
-}
-
-.circuit-2::after {
-  box-sizing: border-box;
-  height: 8px;
-  width: 8px;
-  background-color: #3388FF;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 4px;
-  -webkit-transform: translateY(-50%) scale(0,0);
-  -ms-transform: translateY(-50%) scale(0,0);
-  transform: translateY(-50%) scale(0,0);
-  opacity: 0;
-  -webkit-transition: -webkit-transform 0.05s ease-in,opacity 0.05s ease-in;
-  -webkit-transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-  transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-}
-
-<div>
+  </div>
+  <div>
     <input
       class="circuit-0 circuit-1"
       id="radio-button_3"
@@ -158,77 +105,11 @@ HTMLCollection [
     <label
       class="circuit-2 circuit-3"
       for="radio-button_3"
-      name="radio-button-group_1"
-      value="second"
     >
       Option 2
     </label>
-  </div>,
-  .circuit-0 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.circuit-0:focus + label::before {
-  border-width: 2px;
-  border-color: #3388FF;
-}
-
-.circuit-2 {
-  color: #5C656F;
-  padding-left: 24px;
-  position: relative;
-}
-
-.circuit-2::before {
-  box-sizing: border-box;
-  height: 16px;
-  width: 16px;
-  box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
-  background-color: #FFFFFF;
-  border: 1px solid #9DA7B1;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  -webkit-transition: border 0.05s ease-in;
-  transition: border 0.05s ease-in;
-}
-
-.circuit-2::after {
-  box-sizing: border-box;
-  height: 8px;
-  width: 8px;
-  background-color: #3388FF;
-  border-radius: 100%;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 4px;
-  -webkit-transform: translateY(-50%) scale(0,0);
-  -ms-transform: translateY(-50%) scale(0,0);
-  transform: translateY(-50%) scale(0,0);
-  opacity: 0;
-  -webkit-transition: -webkit-transform 0.05s ease-in,opacity 0.05s ease-in;
-  -webkit-transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-  transition: transform 0.05s ease-in,opacity 0.05s ease-in;
-}
-
-<div>
+  </div>
+  <div>
     <input
       class="circuit-0 circuit-1"
       id="radio-button_4"
@@ -239,11 +120,9 @@ HTMLCollection [
     <label
       class="circuit-2 circuit-3"
       for="radio-button_4"
-      name="radio-button-group_1"
-      value="third"
     >
       Option 3
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
diff --git a/src/components/Selector/Selector.docs.mdx b/src/components/Selector/Selector.docs.mdx
index 20c5531743..e6c2b2b6af 100644
--- a/src/components/Selector/Selector.docs.mdx
+++ b/src/components/Selector/Selector.docs.mdx
@@ -1,15 +1,14 @@
 import { Status, Props, Story } from '../../../.storybook/components';
 import Selector from './Selector';
+import SelectorGroup from '../SelectorGroup';
 
 # Selector
 
 <Status.Stable />
 
-The selector is a component that allows users to select a single option from a range of items, keeping that selection
-highlighted and allowing possible changes to happen on the same screen based on it.
+The selector is a component that allows users to select a single or multiple options from a range of items, keeping that selection highlighted and allowing possible changes to happen on the same screen based on it.
 
 <Story id="forms-selector--base" />
-
 <Props of={Selector} />
 
 ## When to use it
@@ -25,10 +24,19 @@ same screen that they are currently in. For example, choosing a payment method o
 
 ## Component variations
 
-### Selected option
+### Selected
 
 <Story id="forms-selector--selected" />
 
-### Disabled option
+### Disabled
 
 <Story id="forms-selector--disabled" />
+
+## SelectorGroup
+
+<Story id="forms-selector-selectorgroup--base" />
+<Props of={SelectorGroup} />
+
+### Multiple
+
+<Story id="forms-selector-selectorgroup--multiple" />
diff --git a/src/components/Selector/Selector.js b/src/components/Selector/Selector.js
index b62af51408..8634ccb0c5 100644
--- a/src/components/Selector/Selector.js
+++ b/src/components/Selector/Selector.js
@@ -13,79 +13,172 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import withAriaSelected from '../../util/withAriaSelected';
-import { shadowSingle } from '../../styles/style-helpers';
+import { hideVisually } from 'polished';
 
-const baseStyles = ({ theme }) => css`
+import { childrenPropType } from '../../util/shared-prop-types';
+import { shadowSingle, shadowDouble } from '../../styles/style-helpers';
+import { uniqueId } from '../../util/id';
+
+const wrapperStyles = ({ theme }) => css`
   label: selector;
+  position: relative;
+  margin-bottom: ${theme.spacings.mega};
+`;
+
+const SelectorWrapper = styled.div(wrapperStyles);
+
+const baseStyles = ({ theme }) => css`
+  label: selector__label;
+  ${shadowSingle({ theme })};
+  display: block;
   cursor: pointer;
   padding: ${theme.spacings.giga};
   border-radius: ${theme.borderRadius.giga};
-  border: ${theme.borderWidth.kilo} solid ${theme.colors.n300};
   background-color: ${theme.colors.white};
-  margin-bottom: ${theme.spacings.mega};
   fill: ${theme.colors.n400};
-`;
+  text-align: center;
 
-const hoverStyles = ({ selected, theme }) =>
-  !selected &&
-  css`
-    label: selector--hover;
-    &:hover {
-      border: ${theme.borderWidth.mega} solid ${theme.colors.n300};
-      background-color: ${theme.colors.n100};
-    }
-  `;
+  &::before {
+    display: block;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: ${theme.borderRadius.giga};
+    border: ${theme.borderWidth.kilo} solid ${theme.colors.n500};
+  }
 
-const selectedStyles = ({ selected, theme }) =>
-  selected &&
-  css`
-    label: selector--selected;
-    border: ${theme.borderWidth.mega} solid ${theme.colors.p500};
-    background-color: ${theme.colors.b100};
-    ${shadowSingle({ theme })};
-  `;
+  &:hover {
+    background-color: ${theme.colors.n100};
+
+    &::before {
+      border: ${theme.borderWidth.mega} solid ${theme.colors.n500};
+    }
+  }
+`;
 
 const disabledStyles = ({ disabled, theme }) =>
   disabled &&
   css`
-    label: selector--disabled;
+    label: selector__label--disabled;
     color: ${theme.colors.n500};
     cursor: default;
     pointer-events: none;
+
+    &::before {
+      border-color: ${theme.colors.n300};
+    }
   `;
 
+const SelectorLabel = styled.label(baseStyles, disabledStyles);
+
+const inputStyles = ({ theme }) => css`
+  label: selector__input;
+  ${hideVisually()};
+
+  &:focus + label {
+    &::before {
+      border-width: ${theme.borderWidth.mega};
+    }
+  }
+
+  &:checked + label {
+    background-color: ${theme.colors.b100};
+    ${shadowDouble({ theme })};
+
+    &::before {
+      border: ${theme.borderWidth.mega} solid ${theme.colors.p500};
+    }
+  }
+`;
+
+const SelectorInput = styled.input(inputStyles);
+
 /**
  * A selector allows users to choose between several mutually-exlusive choices,
  * accompanied by descriptions, possibly with tabular data.
  */
-const Selector = styled.div(
-  baseStyles,
-  hoverStyles,
-  selectedStyles,
-  disabledStyles
-);
+const Selector = ({
+  children,
+  value,
+  id,
+  name,
+  disabled,
+  multiple,
+  checked,
+  onChange,
+  ...props
+}) => {
+  const inputId = id || uniqueId('selector_');
+  const type = multiple ? 'checkbox' : 'radio';
+  return (
+    <SelectorWrapper {...props}>
+      <SelectorInput
+        type={type}
+        id={inputId}
+        name={name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        onClick={onChange}
+      />
+      <SelectorLabel htmlFor={inputId} disabled={disabled}>
+        {children}
+      </SelectorLabel>
+    </SelectorWrapper>
+  );
+};
 
 Selector.propTypes = {
+  /**
+   * Controles/Toggles the checked state.
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Value string for input.
+   */
+  value: PropTypes.string.isRequired,
+  /**
+   * Child nodes to be rendered as the label.
+   */
+  children: childrenPropType.isRequired,
+  /**
+   * The name of the selector.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * A unique ID used to link the input and label.
+   */
+  id: PropTypes.string,
   /**
    * Whether the selector is selected or not.
    */
-  selected: PropTypes.bool,
+  checked: PropTypes.bool,
   /**
    * Whether the selector is disabled or not.
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * Whether the user can select multiple options.
+   */
+  multiple: PropTypes.bool
 };
 
 Selector.defaultProps = {
-  selected: false,
-  disabled: false
+  checked: false,
+  disabled: false,
+  multiple: false
 };
 
 /**
  * @component
  */
-export default withAriaSelected(Selector);
+export default Selector;
diff --git a/src/components/Selector/Selector.spec.js b/src/components/Selector/Selector.spec.js
index e521d38936..ab77f962e4 100644
--- a/src/components/Selector/Selector.spec.js
+++ b/src/components/Selector/Selector.spec.js
@@ -17,17 +17,87 @@ import React from 'react';
 
 import Selector from '.';
 
+const defaultProps = {
+  name: 'name',
+  value: 'value',
+  onChange: jest.fn()
+};
+
 describe('Selector', () => {
-  it('should render a default selector appropriately', () => {
-    const actual = create(<Selector />);
+  /**
+   * Style tests.
+   */
+  it('should render a default selector', () => {
+    const actual = create(<Selector {...defaultProps}>Label</Selector>);
     expect(actual).toMatchSnapshot();
   });
-  it('should render a disabled selector appropriately', () => {
-    const actual = create(<Selector disabled />);
+  it('should render a disabled selector', () => {
+    const actual = create(
+      <Selector {...defaultProps} disabled>
+        Label
+      </Selector>
+    );
     expect(actual).toMatchSnapshot();
   });
-  it('should render a selected selector appropriately', () => {
-    const actual = create(<Selector selected />);
+  it('should render a checked selector', () => {
+    const actual = create(
+      <Selector {...defaultProps} checked>
+        Label
+      </Selector>
+    );
     expect(actual).toMatchSnapshot();
   });
+
+  it('should render a radio input by default', () => {
+    const { getByLabelText } = render(
+      <Selector {...defaultProps}>Label</Selector>
+    );
+    expect(getByLabelText('Label')).toHaveAttribute('type', 'radio');
+  });
+
+  it('should render a checkbox input when multiple options can be selected', () => {
+    const { getByLabelText } = render(
+      <Selector {...defaultProps} multiple>
+        Label
+      </Selector>
+    );
+    expect(getByLabelText('Label')).toHaveAttribute('type', 'checkbox');
+  });
+
+  /**
+   * Logic tests.
+   */
+  it('should be unchecked by default', () => {
+    const { getByLabelText } = render(
+      <Selector {...defaultProps}>Label</Selector>
+    );
+    const inputEl = getByLabelText('Label', {
+      exact: false
+    });
+    expect(inputEl).not.toHaveAttribute('checked');
+  });
+
+  it('should call the change handler when clicked', () => {
+    const { getByLabelText } = render(
+      <Selector {...defaultProps}>Label</Selector>
+    );
+    const inputEl = getByLabelText('Label', {
+      exact: false
+    });
+
+    act(() => {
+      fireEvent.click(inputEl);
+    });
+
+    expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
+  /**
+   * Accessibility tests.
+   */
+  it('should meet accessibility guidelines', async () => {
+    const wrapper = renderToHtml(<Selector {...defaultProps}>Label</Selector>);
+    const actual = await axe(wrapper);
+    expect(actual).toHaveNoViolations();
+  });
 });
diff --git a/src/components/Selector/Selector.story.js b/src/components/Selector/Selector.story.js
index 0292212583..63e616bd1a 100644
--- a/src/components/Selector/Selector.story.js
+++ b/src/components/Selector/Selector.story.js
@@ -29,40 +29,26 @@ export default {
 };
 
 /* eslint-disable react/prop-types */
-const SelectorsWithState = props => {
-  const [selected, setSelected] = useState(0);
+const SelectorWithState = props => {
+  const [checked, setChecked] = useState(props.checked || false);
 
-  const handleChange = index => e => {
-    setSelected(index);
-    if (props.onClick) {
-      props.onClick(e);
-    }
+  const toggleChecked = () => {
+    setChecked(prev => !prev);
   };
 
-  return (
-    <>
-      <Selector
-        {...props}
-        selected={selected === 0}
-        onClick={handleChange(0)}
-      />
-      <Selector
-        {...props}
-        selected={selected === 1}
-        onClick={handleChange(1)}
-      />
-    </>
-  );
+  return <Selector {...props} checked={checked} onChange={toggleChecked} />;
 };
 
 export const base = () => (
-  <SelectorsWithState disabled={boolean('Disabled', false)}>
+  <SelectorWithState disabled={boolean('Disabled', false)}>
     Select me!
-  </SelectorsWithState>
+  </SelectorWithState>
 );
 
-export const selected = () => <Selector selected>I am selected!</Selector>;
+export const selected = () => (
+  <SelectorWithState checked>I am selected!</SelectorWithState>
+);
 
 export const disabled = () => (
-  <Selector disabled>I cannot be selected</Selector>
+  <SelectorWithState disabled>I cannot be selected</SelectorWithState>
 );
diff --git a/src/components/Selector/__snapshots__/Selector.spec.js.snap b/src/components/Selector/__snapshots__/Selector.spec.js.snap
index 60efdde621..61b07fa061 100644
--- a/src/components/Selector/__snapshots__/Selector.spec.js.snap
+++ b/src/components/Selector/__snapshots__/Selector.spec.js.snap
@@ -1,64 +1,260 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Selector should render a default selector appropriately 1`] = `
+exports[`Selector should render a checked selector 1`] = `
+.circuit-4 {
+  position: relative;
+  margin-bottom: 16px;
+}
+
 .circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
   cursor: pointer;
   padding: 24px;
   border-radius: 5px;
-  border: 1px solid #D8DDE1;
   background-color: #FFFFFF;
-  margin-bottom: 16px;
+  text-align: center;
 }
 
-.circuit-0:hover {
-  border: 2px solid #D8DDE1;
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
   background-color: #FAFBFC;
 }
 
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
 <div
-  class="circuit-0 circuit-1"
-/>
+  class="circuit-4 circuit-5"
+>
+  <input
+    checked=""
+    class="circuit-0 circuit-1"
+    id="selector_3"
+    name="name"
+    type="radio"
+    value="value"
+  />
+  <label
+    class="circuit-2 circuit-3"
+    for="selector_3"
+  >
+    Label
+  </label>
+</div>
 `;
 
-exports[`Selector should render a disabled selector appropriately 1`] = `
+exports[`Selector should render a default selector 1`] = `
+.circuit-4 {
+  position: relative;
+  margin-bottom: 16px;
+}
+
 .circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
   cursor: pointer;
   padding: 24px;
   border-radius: 5px;
-  border: 1px solid #D8DDE1;
   background-color: #FFFFFF;
-  margin-bottom: 16px;
-  color: #9DA7B1;
-  cursor: default;
-  pointer-events: none;
+  text-align: center;
 }
 
-.circuit-0:hover {
-  border: 2px solid #D8DDE1;
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
   background-color: #FAFBFC;
 }
 
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
 <div
-  class="circuit-0 circuit-1"
-  disabled=""
-/>
+  class="circuit-4 circuit-5"
+>
+  <input
+    class="circuit-0 circuit-1"
+    id="selector_1"
+    name="name"
+    type="radio"
+    value="value"
+  />
+  <label
+    class="circuit-2 circuit-3"
+    for="selector_1"
+  >
+    Label
+  </label>
+</div>
 `;
 
-exports[`Selector should render a selected selector appropriately 1`] = `
+exports[`Selector should render a disabled selector 1`] = `
+.circuit-4 {
+  position: relative;
+  margin-bottom: 16px;
+}
+
 .circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
   cursor: pointer;
   padding: 24px;
   border-radius: 5px;
-  border: 1px solid #D8DDE1;
   background-color: #FFFFFF;
-  margin-bottom: 16px;
-  border: 2px solid #3388FF;
-  background-color: #EDF4FC;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  text-align: center;
+  color: #9DA7B1;
+  cursor: default;
+  pointer-events: none;
+}
+
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
+.circuit-2::before {
+  border-color: #D8DDE1;
 }
 
 <div
-  aria-selected="true"
-  class="circuit-0 circuit-1"
-/>
+  class="circuit-4 circuit-5"
+>
+  <input
+    class="circuit-0 circuit-1"
+    disabled=""
+    id="selector_2"
+    name="name"
+    type="radio"
+    value="value"
+  />
+  <label
+    class="circuit-2 circuit-3"
+    disabled=""
+    for="selector_2"
+  >
+    Label
+  </label>
+</div>
 `;
diff --git a/src/components/SelectorGroup/SelectorGroup.js b/src/components/SelectorGroup/SelectorGroup.js
new file mode 100644
index 0000000000..021d5aa193
--- /dev/null
+++ b/src/components/SelectorGroup/SelectorGroup.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { includes } from 'lodash/fp';
+
+import { uniqueId } from '../../util/id';
+
+import Selector from '../Selector';
+
+/**
+ * A group of Selectors.
+ */
+const SelectorGroup = ({
+  options,
+  onChange,
+  value: activeValue,
+  name: customName,
+  label,
+  multiple,
+  ...props
+}) => {
+  const name = customName || uniqueId('selector-group_');
+  return (
+    <div role="group" aria-label={label} {...props}>
+      {options &&
+        options.map(({ children, value, ...rest }) => (
+          <Selector
+            key={value}
+            {...{ ...rest, value, name, onChange, multiple }}
+            checked={includes(value, activeValue)}
+          >
+            {children}
+          </Selector>
+        ))}
+    </div>
+  );
+};
+
+SelectorGroup.propTypes = {
+  /**
+   * A collection of available options. Each option must have at least
+   * a value and children.
+   */
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+      children: PropTypes.any.isRequired,
+      disabled: PropTypes.bool
+    })
+  ).isRequired,
+  /**
+   * Controles/Toggles the checked state. Passed on to the Selectors.
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * The value of the currently checked Selector.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]).isRequired,
+  /**
+   * A unique name for the radio group.
+   */
+  name: PropTypes.string,
+  /**
+   * A visually hidden description of the selector group for screen readers.
+   */
+  label: PropTypes.string,
+  /**
+   * Whether the user can select multiple options.
+   */
+  multiple: PropTypes.bool
+};
+
+SelectorGroup.defaultProps = {
+  name: null,
+  multiple: false
+};
+
+/**
+ * @component
+ */
+export default SelectorGroup;
diff --git a/src/components/SelectorGroup/SelectorGroup.spec.js b/src/components/SelectorGroup/SelectorGroup.spec.js
new file mode 100644
index 0000000000..387300fff3
--- /dev/null
+++ b/src/components/SelectorGroup/SelectorGroup.spec.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import SelectorGroup from '.';
+
+describe('SelectorGroup', () => {
+  const options = [
+    {
+      children: 'Option 1',
+      value: 'first'
+    },
+    {
+      children: 'Option 2',
+      value: 'second'
+    },
+    {
+      children: 'Option 3',
+      value: 'third'
+    }
+  ];
+
+  /**
+   * Style tests.
+   */
+  it('should render with default styles', () => {
+    const actual = create(<SelectorGroup {...{ options }} />);
+    expect(actual).toMatchSnapshot();
+  });
+
+  /**
+   * Logic tests.
+   */
+  it('should check the selected option', () => {
+    const value = 'second';
+    const { getByLabelText } = render(
+      <SelectorGroup options={options} value={value} />
+    );
+    expect(getByLabelText('Option 1')).not.toHaveAttribute('checked');
+    expect(getByLabelText('Option 2')).toHaveAttribute('checked');
+    expect(getByLabelText('Option 3')).not.toHaveAttribute('checked');
+  });
+
+  it('should check the selected options', () => {
+    const value = ['second', 'third'];
+    const { getByLabelText } = render(
+      <SelectorGroup options={options} value={value} multiple />
+    );
+    expect(getByLabelText('Option 1')).not.toHaveAttribute('checked');
+    expect(getByLabelText('Option 2')).toHaveAttribute('checked');
+    expect(getByLabelText('Option 3')).toHaveAttribute('checked');
+  });
+
+  /**
+   * Accessibility tests.
+   */
+  it('should meet accessibility guidelines', async () => {
+    const value = 'second';
+    const wrapper = renderToHtml(
+      <SelectorGroup
+        options={options}
+        value={value}
+        label="Choose your favourite option"
+      />
+    );
+    const actual = await axe(wrapper);
+    expect(actual).toHaveNoViolations();
+  });
+});
diff --git a/src/components/SelectorGroup/SelectorGroup.story.js b/src/components/SelectorGroup/SelectorGroup.story.js
new file mode 100644
index 0000000000..26cb9c505e
--- /dev/null
+++ b/src/components/SelectorGroup/SelectorGroup.story.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+
+import SelectorGroup from './SelectorGroup';
+
+export default {
+  title: 'Forms/Selector/SelectorGroup',
+  component: SelectorGroup,
+  parameters: {
+    jest: ['SelectorGroup']
+  }
+};
+
+const options = [
+  {
+    children: 'Apple',
+    value: 'apple'
+  },
+  {
+    children: 'Banana',
+    value: 'banana'
+  },
+  {
+    children: 'Mango',
+    value: 'mango'
+  }
+];
+
+/* eslint-disable react/prop-types */
+const SelectorGroupWithState = ({ children, ...props }) => {
+  const [value, setValue] = useState(props.multiple ? [] : '');
+  const handleChange = event => {
+    event.persist();
+    setValue(prev => {
+      if (!props.multiple) {
+        return event.target.value;
+      }
+      return prev.includes(event.target.value)
+        ? prev.filter(v => v !== event.target.value)
+        : [...prev, event.target.value];
+    });
+  };
+  return (
+    <SelectorGroup
+      {...props}
+      value={value}
+      onChange={handleChange}
+      label="Choose your favourite fruit"
+    />
+  );
+};
+/* eslint-enable react/prop-types */
+
+export const base = () => (
+  <SelectorGroupWithState options={options} name="selector-group" />
+);
+
+export const multiple = () => (
+  <SelectorGroupWithState options={options} name="selector-group" multiple />
+);
diff --git a/src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap b/src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap
new file mode 100644
index 0000000000..b0aebfcf64
--- /dev/null
+++ b/src/components/SelectorGroup/__snapshots__/SelectorGroup.spec.js.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectorGroup should render with default styles 1`] = `
+.circuit-4 {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-0:focus + label::before {
+  border-width: 2px;
+}
+
+.circuit-0:checked + label {
+  background-color: #EDF4FC;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06);
+}
+
+.circuit-0:checked + label::before {
+  border: 2px solid #3388FF;
+}
+
+.circuit-2 {
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  display: block;
+  cursor: pointer;
+  padding: 24px;
+  border-radius: 5px;
+  background-color: #FFFFFF;
+  text-align: center;
+}
+
+.circuit-2::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  border: 1px solid #9DA7B1;
+}
+
+.circuit-2:hover {
+  background-color: #FAFBFC;
+}
+
+.circuit-2:hover::before {
+  border: 2px solid #9DA7B1;
+}
+
+<div
+  role="group"
+>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_2"
+      name="selector-group_1"
+      type="radio"
+      value="first"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_2"
+    >
+      Option 1
+    </label>
+  </div>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_3"
+      name="selector-group_1"
+      type="radio"
+      value="second"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_3"
+    >
+      Option 2
+    </label>
+  </div>
+  <div
+    class="circuit-4 circuit-5"
+  >
+    <input
+      class="circuit-0 circuit-1"
+      id="selector_4"
+      name="selector-group_1"
+      type="radio"
+      value="third"
+    />
+    <label
+      class="circuit-2 circuit-3"
+      for="selector_4"
+    >
+      Option 3
+    </label>
+  </div>
+</div>
+`;
diff --git a/src/components/SelectorGroup/index.js b/src/components/SelectorGroup/index.js
new file mode 100644
index 0000000000..2dd0f300ea
--- /dev/null
+++ b/src/components/SelectorGroup/index.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import SelectorGroup from './SelectorGroup';
+
+export default SelectorGroup;