diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue
index 45d90460e7ac587c0f41e330ddef09ff02b17ae6..23e80f4f077b68066845dff4cac4d309a6c7b4af 100644
--- a/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue
@@ -2,13 +2,21 @@
 export default {
   data() {
     return {
-      selected: 'pizza',
-      options: [{ text: 'Pizza', value: 'pizza' }, { text: 'Tacos', value: 'tacos' }],
+      selected: 'one',
+      options: [
+        { value: 'one', text: 'Option 1' },
+        { value: 'two', text: 'Option 2' },
+        { value: 'three', text: 'Option 3' },
+      ],
     };
   },
 };
 </script>
 
 <template>
-  <gl-form-radio-group v-model="selected" :options="options" />
+  <gl-form-radio-group
+    v-model="selected"
+    :options="options"
+    :checked="selected"
+  />
 </template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue
index 06b4408b7fa0764cc96c1b04a9c15d22bfa54e55..7544a5d6dd58d5b89f08b928df4003cca68f6311 100644
--- a/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue
@@ -2,8 +2,8 @@
 export default {
   data() {
     return {
-      selected: 'pizza',
-      options: [{ text: 'Pizza', value: 'pizza' }, { text: 'Tacos', value: 'tacos' }],
+      selected: 'one',
+      options: [{ text: 'Option 1', value: 'one' }, { text: 'Option 2', value: 'two' }],
     };
   },
 };
@@ -15,5 +15,6 @@ export default {
     :options="options"
     :buttons="true"
     button-variant="primary"
+    :checked="selected"
   />
 </template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.options_and_subcomponents.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.options_and_subcomponents.example.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9bce6e2f3fb1596d1f429a383f9d0ed53163fcc8
--- /dev/null
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.options_and_subcomponents.example.vue
@@ -0,0 +1,28 @@
+<script>
+export default {
+  data() {
+    return {
+      selected: 'one',
+      options: [{ text: 'Option 2', value: 'two' }],
+    };
+  },
+};
+</script>
+
+<template>
+  <gl-form-radio-group
+    v-model="selected"
+    :options="options"
+    :checked="selected"
+  >
+    <gl-form-radio value="three">
+      Option 3
+    </gl-form-radio>
+
+    <template slot="first">
+      <gl-form-radio value="one">
+        Option 1
+      </gl-form-radio>
+    </template>
+  </gl-form-radio-group>
+</template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.stacked.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.stacked.example.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39fdf9176760d5729f0063425281429eb25476af
--- /dev/null
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.stacked.example.vue
@@ -0,0 +1,19 @@
+<script>
+export default {
+  data() {
+    return {
+      selected: 'one',
+      options: [{ text: 'Option 1', value: 'one' }, { text: 'Option 2', value: 'two' }],
+    };
+  },
+};
+</script>
+
+<template>
+  <gl-form-radio-group
+    v-model="selected"
+    :options="options"
+    :checked="selected"
+    stacked
+  />
+</template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.subcomponents.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.subcomponents.example.vue
new file mode 100644
index 0000000000000000000000000000000000000000..73a81db4cf3ce8a102912b48e87b30b738f7d7be
--- /dev/null
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.subcomponents.example.vue
@@ -0,0 +1,23 @@
+<script>
+export default {
+  data() {
+    return {
+      selected: 'one',
+    };
+  },
+};
+</script>
+
+<template>
+  <gl-form-radio-group
+    v-model="selected"
+    :checked="selected"
+  >
+    <gl-form-radio value="one">
+      Option 1
+    </gl-form-radio>
+    <gl-form-radio value="two">
+      Option 2
+    </gl-form-radio>
+  </gl-form-radio-group>
+</template>
diff --git a/components/base/form/form_radio/examples/form_radio/index.js b/components/base/form/form_radio/examples/form_radio/index.js
index 29afbac6c7ba588e11e392e5b094d396dda0f787..ebf218f6d6aad35f3bf16040eabb0719a935a537 100644
--- a/components/base/form/form_radio/examples/form_radio/index.js
+++ b/components/base/form/form_radio/examples/form_radio/index.js
@@ -1,20 +1,43 @@
 import FormRadioGroupBasicExample from './form_radio_group.basic.example.vue';
 import FormRadioGroupButtonExample from './form_radio_group.button.example.vue';
+import FormRadioGroupSubcomponents from './form_radio_group.subcomponents.example.vue';
+import FormRadioGroupOptionsSubcomponents from './form_radio_group.options_and_subcomponents.example.vue';
+import FormRadioGroupStackedExample from './form_radio_group.stacked.example.vue';
 
 export default [
   {
-    name: 'Form Radio',
+    name: 'Basic',
     items: [
       {
-        id: 'form-group-radio',
-        name: 'Form radio group with code',
+        id: 'form-radio-group',
+        name: 'Options',
         component: FormRadioGroupBasicExample,
       },
+      {
+        id: 'form-radio-group-subcomponents',
+        name: 'Subcomponents',
+        component: FormRadioGroupSubcomponents,
+      },
+      {
+        id: 'form-radio-group-options-and-subcomponents',
+        name: 'Options and subcomponents',
+        component: FormRadioGroupOptionsSubcomponents,
+      },
+    ],
+  },
+  {
+    name: 'Styling',
+    items: [
       {
         id: 'form-radio-group-buttons',
-        name: 'Form radio group with buttons',
+        name: 'Buttons',
         component: FormRadioGroupButtonExample,
       },
+      {
+        id: 'form-radio-group-stacked',
+        name: 'Stacked',
+        component: FormRadioGroupStackedExample,
+      },
     ],
   },
 ];
diff --git a/components/base/form/form_radio/form_radio.documentation.js b/components/base/form/form_radio/form_radio.documentation.js
deleted file mode 100644
index 8c945bc207387fc94c9c5ddd9f50287bee7ea677..0000000000000000000000000000000000000000
--- a/components/base/form/form_radio/form_radio.documentation.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as description from './form_radio.md';
-import examples from './examples/form_radio';
-
-export default {
-  description,
-  examples,
-  bootstrapComponent: 'b-form-radio',
-};
diff --git a/components/base/form/form_radio/form_radio.md b/components/base/form/form_radio/form_radio.md
deleted file mode 100644
index 07a1692e700437f936c705140a5011e52225eb40..0000000000000000000000000000000000000000
--- a/components/base/form/form_radio/form_radio.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Form radio
-
-Form radios and form radio groups for general use inside forms.
-
-Note: Form radio groups using subcomponents are not implemented yet as there are some weird side effects of wrapping individual radio buttons.
diff --git a/components/base/form/form_radio/form_radio.vue b/components/base/form/form_radio/form_radio.vue
index 6043931808762921bcb9cab3ab1417925fb27dd6..599b2b35c54ccbf43740b148a9584df2f0e23b48 100644
--- a/components/base/form/form_radio/form_radio.vue
+++ b/components/base/form/form_radio/form_radio.vue
@@ -5,6 +5,14 @@ export default {
   components: {
     BFormRadio,
   },
+  inheritAttrs: false,
+  props: {
+    plain: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
 };
 </script>
 
diff --git a/components/base/form/form_radio/form_radio_group.documentation.js b/components/base/form/form_radio/form_radio_group.documentation.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b96f4c12f8c0c4b64f841b8f5bb27b2f8828201
--- /dev/null
+++ b/components/base/form/form_radio/form_radio_group.documentation.js
@@ -0,0 +1,8 @@
+import * as description from './form_radio_group.md';
+import examples from './examples/form_radio';
+
+export default {
+  description,
+  examples,
+  bootstrapComponent: 'b-form-radio-group',
+};
diff --git a/components/base/form/form_radio/form_radio_group.md b/components/base/form/form_radio/form_radio_group.md
new file mode 100644
index 0000000000000000000000000000000000000000..4138455e3fcb3fc5ebbc938ae17b3814b4cc50c2
--- /dev/null
+++ b/components/base/form/form_radio/form_radio_group.md
@@ -0,0 +1,3 @@
+# Form Radio Group
+
+Form radio groups for general use inside forms.
diff --git a/components/base/form/form_radio/form_radio_group.vue b/components/base/form/form_radio/form_radio_group.vue
index 6be46d49f4f1c861ffd74c2a3d709536a3b976e6..10973d9a973e2a20c8c932e208f98a9c8c4538ab 100644
--- a/components/base/form/form_radio/form_radio_group.vue
+++ b/components/base/form/form_radio/form_radio_group.vue
@@ -6,10 +6,22 @@ export default {
     BFormRadioGroup,
   },
   inheritAttrs: false,
+  props: {
+    plain: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
 };
 </script>
 <template>
-  <b-form-radio-group plain v-bind="$attrs" v-on="$listeners" @change="$emit('change', $event)">
+  <b-form-radio-group
+    :plain="plain"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot slot="first" name="first"></slot>
     <slot></slot>
   </b-form-radio-group>
 </template>
diff --git a/documentation/components_documentation.js b/documentation/components_documentation.js
index 5569c0094131519d1b0152270c81967d67a28838..ef3e7e3e2b2237e5eace60f0fe8e35c99f911a87 100644
--- a/documentation/components_documentation.js
+++ b/documentation/components_documentation.js
@@ -39,8 +39,8 @@ export {
   default as GlFormGroupDocumentation,
 } from '../components/base/form/form_group/form_group.documentation';
 export {
-  default as GlFormRadioDocumentation,
-} from '../components/base/form/form_radio/form_radio.documentation';
+  default as GlFormRadioGroupDocumentation,
+} from '../components/base/form/form_radio/form_radio_group.documentation';
 export {
   default as GlSearchBoxDocumentation,
 } from '../components/base/search/search_box.documentation';
diff --git a/stories/base/form/form_radio.js b/stories/base/form/form_radio_group.js
similarity index 70%
rename from stories/base/form/form_radio.js
rename to stories/base/form/form_radio_group.js
index 315041e3a4f189b9a1a84ce2535310e2dc104e7a..e479084f3302dddc44ae19b9bc66095c8d06582f 100644
--- a/stories/base/form/form_radio.js
+++ b/stories/base/form/form_radio_group.js
@@ -1,7 +1,7 @@
 import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
 import documentedStoriesOf from '../../utils/documented_stories';
 import { sizeOptions, variantOptions } from '../../utils/constants';
-import readme from '../../../components/base/form/form_radio/form_radio.md';
+import readme from '../../../components/base/form/form_radio/form_radio_group.md';
 import { GlFormRadio, GlFormRadioGroup } from '../../../index';
 
 const components = {
@@ -9,7 +9,12 @@ const components = {
   GlFormRadioGroup,
 };
 
-function generateProps({ stacked = false, buttons = false, groupName = 'radio-group-name' } = {}) {
+function generateProps({
+  stacked = false,
+  buttons = false,
+  plain = true,
+  name = 'radio-group-name',
+} = {}) {
   return {
     size: {
       type: String,
@@ -27,40 +32,43 @@ function generateProps({ stacked = false, buttons = false, groupName = 'radio-gr
       type: String,
       default: select('button-variant', variantOptions, variantOptions.secondary),
     },
+    plain: {
+      type: Boolean,
+      default: boolean('plain', plain),
+    },
     name: {
       type: String,
-      default: text('name', groupName),
+      default: text('name', name),
     },
   };
 }
 
-documentedStoriesOf('base|form/form-radio', readme)
+documentedStoriesOf('base|form/form-radio-group', readme)
   .addDecorator(withKnobs)
-  .add('Radios using code', () => ({
+  .add('default', () => ({
     components,
     props: generateProps(),
     data() {
       return {
-        selected: 'Pizza',
+        selected: 'one',
         options: [
-          { value: 'Pizza', text: 'Pizza' },
-          { value: 'Tacos', text: 'Tacos' },
-          { value: 'Burger', text: 'Burguer', disabled: boolean('disabled', false) },
+          { value: 'one', text: 'Option 1' },
+          { value: 'two', text: 'Option 2' },
+          { value: 'three', text: 'Option 3', disabled: boolean('disabled', false) },
         ],
       };
     },
     template: `
       <gl-form-radio-group 
-        id="food-radios"
         v-model="selected"
         :options="options"
         :size="size"
         :stacked="stacked"
         :buttons="buttons"
         :button-variant="buttonVariant"
+        :plain="plain"
         :name="name"
         :checked="selected"
-      >
-      </gl-form-radio-group>
+      />
     `,
   }));