add FormRadio component

Author: isneezy

example/src/components/FormsPage.vue

@@ -51,6 +51,25 @@
                                     </select>
                                 </form-group>
                             </grid-col>
+                            <grid-col md="6" lg="4">
+                                <form-group>
+                                    <form-label>Radios</form-label>
+                                    <div class="custom-controls-stacked">
+                                        <form-radio checked name="example-radios" :value="1" label="Option 1"/>
+                                        <form-radio name="example-radios" :value="2" label="Option 2"/>
+                                        <form-radio name="example-radios" :value="3" disabled label="Option Disabled"/>
+                                        <form-radio name="example-radios2" checked :value="4" disabled label="Option Disabled Checked"/>
+                                    </div>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Inline Radios</form-label>
+                                    <div class="custom-controls-stacked">
+                                        <form-radio checked name="example-radios" :value="1" label="Option 1" inline/>
+                                        <form-radio name="example-radios" :value="2" label="Option 2" inline/>
+                                        <form-radio name="example-radios" :value="3" label="Option 3" inline/>
+                                    </div>
+                                </form-group>
+                            </grid-col>
                         </grid-row>
                     </card-body>
                 </card>

src/components/Form/FormRadio.vue

@@ -0,0 +1,44 @@
+<template>
+    <label class="custom-control custom-radio" :class="{'custom-control-inline': inline}">
+        <input class="custom-control-input" v-bind="{name, checked: isChecked, disabled, value: radioValue}" @change="onChange" type="radio">
+        <div class="custom-control-label">{{ label }}</div>
+    </label>
+</template>
+
+<script>
+  import FormInput from './FormInput'
+
+  export default {
+    name: "form-radio",
+    props: {
+      inline: {default: false, type: Boolean},
+      value: {},
+      label: {},
+      checked: {default: false, type: Boolean},
+      disabled: {default: false, type: Boolean},
+      name: {default: '', type: String}
+    },
+
+    computed: {
+      radioValue () {
+        return this.$attrs.value
+      },
+
+      isChecked () {
+        return this.checked || this.radioValue === this.value
+      }
+    },
+
+    methods: {
+      onChange () {
+        this.$emit('input', this.radioValue)
+      }
+    },
+
+    components: {FormInput}
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/index.js

@@ -2,6 +2,7 @@ import FormGroup from './FormGroup'
 import FormInput from './FormInput'
 import FormInvalidFeedback from './FormInvalidFeedback'
 import FormLabel from './FormLabel'
+import FormRadio from './FormRadio'
 import FormStaticText from './FormStaticText'
 import FormTextarea from './FormTextarea'
 
@@ -10,6 +11,7 @@ export {
   FormInput,
   FormInvalidFeedback,
   FormLabel,
+  FormRadio,
   FormStaticText,
   FormTextarea
 }