diff --git a/doc/contributing/automatic_documentation.md b/doc/contributing/automatic_documentation.md
index 5144d6aedc047ca6bd912cb2b45478a0bddba96e..1228ab6fd7f082f7b4cf7ea92fcc8e734326aaf0 100644
--- a/doc/contributing/automatic_documentation.md
+++ b/doc/contributing/automatic_documentation.md
@@ -1,8 +1,8 @@
 # Automatic documentation
 
-We have automated as much of our documentation as possible (for example props, inherited props, links to underlying documentation, etc.) and kept manual tasks (for example name of vue-bootstrap component, slot descriptions, etc.) to an absolute minimum. The target for our documentation components and exports is to have them automatically integrated into the [GitLab Design System](https://design.gitlab.com), also known as Pajamas. The main component for documentation is called `component_documentation_generator.vue`.
+We have automated as much of our documentation as possible (for example props, inherited props, `v-model`, links to underlying documentation, etc.) and kept manual tasks (for example name of vue-bootstrap component, slot descriptions, etc.) to an absolute minimum. The target for our documentation components and exports is to have them automatically integrated into the [GitLab Design System](https://design.gitlab.com), also known as Pajamas. The main component for documentation is called `component_documentation_generator.vue`.
 
-### Component documentation info
+## Component documentation info
 
 To add additional information to our documentation page we are using extra files which hold additional information, those have the format `(component).documentation.js` in the component directory. The following sample has a sample documentation attribute with all possibilities. All of these properties are optional.
 
@@ -43,4 +43,9 @@ export default {
     },
   ]
 };
-```
\ No newline at end of file
+```
+
+## v-model
+
+`v-model` information is automatically added to component documentation if the component
+defines a [`model`](https://vuejs.org/v2/api/#model).
diff --git a/documentation/components/component_documentation_generator.vue b/documentation/components/component_documentation_generator.vue
index f055bc7fa3937b49e9a52c2863a3d6e84e69ccec..443fb39a9ddf03020d4591b5cc8672cfc0e356ff 100644
--- a/documentation/components/component_documentation_generator.vue
+++ b/documentation/components/component_documentation_generator.vue
@@ -15,6 +15,7 @@ import { getValidationInfoText } from '../../src/utils/validation_utils';
 import { gitlabComponents, gitlabChartComponents, componentValidator } from '../all_components';
 
 import GlTable from '../../src/components/base/table/table.vue';
+import GlBadge from '../../src/components/base/badge/badge.vue';
 
 import { getDocumentationFor } from '../components_documentation';
 
@@ -43,6 +44,7 @@ function getPropDefaultValue(defaultValue) {
 export default {
   components: {
     GlTable,
+    GlBadge,
   },
   props: {
     componentName: {
@@ -68,6 +70,19 @@ export default {
     actualComponentOptions() {
       return this.actualComponent.options || {};
     },
+    componentVModel() {
+      const { model } = this.actualComponentOptions;
+
+      if (!model) {
+        return null;
+      }
+
+      return {
+        prop: 'value',
+        event: 'input',
+        ...model,
+      };
+    },
     documentationInfo() {
       return getDocumentationFor(this.componentName);
     },
@@ -136,7 +151,23 @@ export default {
       return returnProps;
     },
     displayEvents() {
-      return this.documentationInfo.events || [];
+      const events = this.documentationInfo.events || [];
+      if (this.componentVModel) {
+        const vModelEventIndex = events.findIndex(
+          ({ event }) => event === this.componentVModel.event
+        );
+        if (vModelEventIndex === -1) {
+          events.push({
+            event: this.componentVModel.event,
+            args: [
+              {
+                arg: this.componentVModel.prop,
+              },
+            ],
+          });
+        }
+      }
+      return events;
     },
     displaySlots() {
       return this.documentationInfo.slots || [];
@@ -197,9 +228,15 @@ export default {
       >
         <template #cell(prop)="field">
           <div>
-            <span :title="field.item._cellVariants ? 'Inherited from Vue Bootstrap' : ''">{{
-              field.value
-            }}</span>
+            <span :title="field.item._cellVariants ? 'Inherited from Vue Bootstrap' : ''">
+              {{ field.value }}
+              <gl-badge
+                v-if="componentVModel && field.value === componentVModel.prop"
+                variant="primary"
+              >
+                v-model
+              </gl-badge>
+            </span>
           </div>
         </template>
         <template #cell(required)="data">
@@ -230,6 +267,15 @@ export default {
     <div v-if="displayEvents.length > 0">
       <h4>Events</h4>
       <gl-table :items="displayEvents" :fields="eventsFields" small head-variant="default" striped>
+        <template #cell(event)="field">
+          {{ field.value }}
+          <gl-badge
+            v-if="componentVModel && field.value === componentVModel.event"
+            variant="primary"
+          >
+            v-model
+          </gl-badge>
+        </template>
         <template #cell(args)="field">
           <div
             v-for="argument in field.value"
@@ -242,6 +288,17 @@ export default {
       </gl-table>
     </div>
 
+    <div v-if="componentVModel">
+      <h4>v-model</h4>
+      <gl-table
+        :items="[componentVModel]"
+        :fields="['prop', 'event']"
+        small
+        head-variant="default"
+        striped
+      />
+    </div>
+
     <h3>Import</h3>
 
     <p>
diff --git a/src/components/base/collapse/collapse.documentation.js b/src/components/base/collapse/collapse.documentation.js
index 757537d46afd95699195a43abffe4d8b3d5f6bba..c6264ccf9c5b1287a5354780597d2c80c336ffeb 100644
--- a/src/components/base/collapse/collapse.documentation.js
+++ b/src/components/base/collapse/collapse.documentation.js
@@ -23,6 +23,18 @@ export default {
       additionalInfo: 'Specify the HTML tag to render instead of the default tag',
     },
   },
+  events: [
+    {
+      event: 'input',
+      description: 'Emitted when the visibility changes',
+      args: [
+        {
+          arg: 'visible',
+          description: 'The visibility state',
+        },
+      ],
+    },
+  ],
   slots: [
     {
       name: 'default',
diff --git a/src/components/base/form/form_checkbox/form_checkbox.documentation.js b/src/components/base/form/form_checkbox/form_checkbox.documentation.js
index 90157a0b2c78169c405aa9ea7ede466cf7df4517..32b63d7f574b8c835ecf45c88199cd0c3bfdf042 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.documentation.js
+++ b/src/components/base/form/form_checkbox/form_checkbox.documentation.js
@@ -6,4 +6,16 @@ export default {
   examples,
   bootstrapComponent: 'b-form-checkbox',
   followsDesignSystem: true,
+  events: [
+    {
+      event: 'input',
+      description: 'Emitted when checked state changes',
+      args: [
+        {
+          arg: 'checked',
+          description: 'Whether the checkbox is checked',
+        },
+      ],
+    },
+  ],
 };
diff --git a/src/components/base/pagination/pagination.documentation.js b/src/components/base/pagination/pagination.documentation.js
index ca464c67e7090b644bc42072dc5a8cff5d974c93..9e34bc7ec39b506d022bbc0ec88329dc9c111ee5 100644
--- a/src/components/base/pagination/pagination.documentation.js
+++ b/src/components/base/pagination/pagination.documentation.js
@@ -62,6 +62,18 @@ export default {
         'Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"',
     },
   },
+  events: [
+    {
+      event: 'input',
+      description: 'Emitted when the page changes',
+      args: [
+        {
+          arg: 'value',
+          description: 'The page that just got loaded',
+        },
+      ],
+    },
+  ],
   slots: [
     {
       name: 'previous',
diff --git a/src/components/base/segmented_control/segmented_control.documentation.js b/src/components/base/segmented_control/segmented_control.documentation.js
index 9c8450d786881077ce7310e5051c98ad47483c65..f90994e1de89555c2df76142442dd383973e788c 100644
--- a/src/components/base/segmented_control/segmented_control.documentation.js
+++ b/src/components/base/segmented_control/segmented_control.documentation.js
@@ -6,4 +6,16 @@ export default {
   description,
   examples,
   bootstrapComponent: 'b-form-radio-group',
+  events: [
+    {
+      event: 'input',
+      description: 'Emitted when the selection changes',
+      args: [
+        {
+          arg: 'checked',
+          description: 'The selected option',
+        },
+      ],
+    },
+  ],
 };
diff --git a/src/components/base/toggle/toggle.documentation.js b/src/components/base/toggle/toggle.documentation.js
index a0b94a6fd0c05facf186c4f824b92bb5e9e757fa..9d69e2ea64bf44eba07fccb851cdbeeaf74b21d9 100644
--- a/src/components/base/toggle/toggle.documentation.js
+++ b/src/components/base/toggle/toggle.documentation.js
@@ -3,4 +3,16 @@ import examples from './examples';
 export default {
   followsDesignSystem: true,
   examples,
+  events: [
+    {
+      event: 'change',
+      description: 'Emitted when the state changes',
+      args: [
+        {
+          arg: 'value',
+          description: 'Whether the toggle is in the enabled',
+        },
+      ],
+    },
+  ],
 };