diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
index a941c6c2907..9b4ba743c2a 100644
--- a/src/components/form-tags/README.md
+++ b/src/components/form-tags/README.md
@@ -501,27 +501,27 @@ of tags:
       <!-- prop `add-on-change` is needed to enable adding tags vie the `change` event -->
       <b-form-tags v-model="value" size="lg" add-on-change no-outer-focus class="mb-2">
         <template v-slot="{ tags, inputAttrs, inputHandlers, disabled, removeTag }">
-        <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
-          <li v-for="tag in tags" :key="tag" class="list-inline-item">
-            <b-form-tag
-              @remove="removeTag(tag)"
-              :title="tag"
-              :disabled="disabled"
-              variant="info"
-            >{{ tag }}</b-form-tag>
-          </li>
-        </ul>
-        <b-form-select
-          v-bind="inputAttrs"
-          v-on="inputHandlers"
-          :disabled="disabled || availableOptions.length === 0"
-          :options="availableOptions"
-        >
-          <template v-slot:first>
-            <!-- This is required to prevent bugs with Safari -->
-            <option disabled value="">Choose a tag...</option>
-          </template>
-        </b-form-select>
+          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
+            <li v-for="tag in tags" :key="tag" class="list-inline-item">
+              <b-form-tag
+                @remove="removeTag(tag)"
+                :title="tag"
+                :disabled="disabled"
+                variant="info"
+              >{{ tag }}</b-form-tag>
+            </li>
+          </ul>
+          <b-form-select
+            v-bind="inputAttrs"
+            v-on="inputHandlers"
+            :disabled="disabled || availableOptions.length === 0"
+            :options="availableOptions"
+          >
+            <template v-slot:first>
+              <!-- This is required to prevent bugs with Safari -->
+              <option disabled value="">Choose a tag...</option>
+            </template>
+          </b-form-select>
         </template>
       </b-form-tags>
     </b-form-group>
@@ -532,13 +532,13 @@ of tags:
   export default {
     data() {
       return {
-        allOptions: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
+        options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
         value: []
       }
     },
     computed: {
       availableOptions() {
-        return this.allOptions.filter(opt => this.value.indexOf(opt) === -1)
+        return this.options.filter(opt => this.value.indexOf(opt) === -1)
       }
     }
   }
@@ -657,6 +657,111 @@ default slot's scope.
 <!-- form-tags-custom-components-advanced.vue -->
 ```
 
+The following is an example of using the `<b-dropdown>` component for choosing or searching from a
+pre-defined set of tags:
+
+```html
+<template>
+  <div>
+    <b-form-group label="Tagged input using dropdown">
+      <b-form-tags v-model="value" no-outer-focus class="mb-2">
+        <template v-slot="{ tags, disabled, addTag, removeTag }">
+          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
+            <li v-for="tag in tags" :key="tag" class="list-inline-item">
+              <b-form-tag
+                @remove="removeTag(tag)"
+                :title="tag"
+                :disabled="disabled"
+                variant="info"
+              >{{ tag }}</b-form-tag>
+            </li>
+          </ul>
+
+          <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
+            <template v-slot:button-content>
+              <b-icon icon="tag-fill"></b-icon> Choose tags
+            </template>
+            <b-dropdown-form @submit.stop.prevent="() => {}">
+              <b-form-group
+                label-for="tag-search-input"
+                label="Search tags"
+                label-cols-md="auto"
+                class="mb-0"
+                label-size="sm"
+                :description="searchDesc"
+                :disabled="disabled"
+              >
+                <b-form-input
+                  v-model="search"
+                  id="tag-search-input"
+                  type="search"
+                  size="sm"
+                  autocomplete="off"
+                 ></b-form-input>
+              </b-form-group>
+            </b-dropdown-form>
+            <b-dropdown-divider></b-dropdown-divider>
+            <b-dropdown-item-button
+              v-for="option in availableOptions"
+              :key="option"
+              @click="onOptionClick({ option, addTag })"
+            >
+              {{ option }}
+            </b-dropdown-item-button>
+            <b-dropdown-text v-if="availableOptions.length === 0">
+              There are no tags available to select
+            </b-dropdown-text>
+          </b-dropdown>
+        </template>
+      </b-form-tags>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
+        search: '',
+        value: []
+      }
+    },
+    computed: {
+      criteria() {
+        // Compute the search criteria
+        return this.search.trim().toLowerCase()
+      },
+      availableOptions() {
+        const criteria = this.criteria
+        // Filter out already selected options
+        const options = this.options.filter(opt => this.value.indexOf(opt) === -1)
+        if (criteria) {
+          // Show only options that match criteria
+          return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1);
+        }
+        // Show all options available
+        return options
+      },
+      searchDesc() {
+        if (this.criteria && this.availableOptions.length === 0) {
+          return 'There are no tags matching your search criteria'
+        }
+        return ''
+      }
+    },
+    methods: {
+      onOptionClick({ option, addTag }) {
+        addTag(option)
+        this.search = ''
+      }
+    }
+  }
+</script>
+
+<!-- b-form-tags-dropdown-example.vue -->
+```
+
 ### Creating wrapper components
 
 You can easily create a custom wrapper component with your preferred rendering style as follows: