From 0ce4174061b2bad2935d505641ccf9c02206545e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20Rold=C3=A1n=20Mart=C3=ADnez?=
 <anrolmar@gmail.com>
Date: Tue, 19 Mar 2024 15:24:09 +0100
Subject: [PATCH] fix(BFormTags): limitTagsText props is not used fixes #1804
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

test(BFormTags): test limitTagsText

Co-authored-by: Ángel Roldán Martínez <Angel.RoldanMartinez@Clarivate.com>
---
 apps/docs/src/docs/components/form-group.md   |   62 +-
 apps/docs/src/docs/components/form-tags.md    | 1330 ++++++++++++++++-
 apps/docs/src/docs/components/form.md         |   18 +-
 .../src/components/BFormTags/BFormTags.vue    |    8 +-
 .../components/BFormTags/form-tags.spec.ts    |   29 +
 5 files changed, 1417 insertions(+), 30 deletions(-)
 create mode 100644 packages/bootstrap-vue-next/src/components/BFormTags/form-tags.spec.ts

diff --git a/apps/docs/src/docs/components/form-group.md b/apps/docs/src/docs/components/form-group.md
index efe6222f9..78c4fc456 100644
--- a/apps/docs/src/docs/components/form-group.md
+++ b/apps/docs/src/docs/components/form-group.md
@@ -99,18 +99,56 @@ columns does not exceed `12`.
 
 See the [Layout and Grid System](/docs/components/layout#how-it-works) docs for further information.
 
-| Prop              | Description                       |
-| ----------------- | --------------------------------- |
-| `label-cols`      | Applies to breakpoint `xs` up     |
-| `label-cols-sm`   | Applies to breakpoint `sm` and up |
-| `label-cols-md`   | Applies to breakpoint `md` and up |
-| `label-cols-lg`   | Applies to breakpoint `lg` and up |
-| `label-cols-xl`   | Applies to breakpoint `xl` and up |
-| `content-cols`    | Applies to breakpoint `xs` up     |
-| `content-cols-sm` | Applies to breakpoint `sm` and up |
-| `content-cols-md` | Applies to breakpoint `md` and up |
-| `content-cols-lg` | Applies to breakpoint `lg` and up |
-| `content-cols-xl` | Applies to breakpoint `xl` and up |
+<table class="b-table table table-bordered table-striped bv-docs-table">
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>label-cols</code></td>
+      <td>Applies to breakpoint <code>xs</code> up</td>
+    </tr>
+    <tr>
+      <td><code>label-cols-sm</code></td>
+      <td>Applies to breakpoint <code>sm</code> and up</td>
+    </tr>
+    <tr>
+      <td><code>label-cols-md</code></td>
+      <td>Applies to breakpoint <code>md</code> and up</td>
+    </tr>
+    <tr>
+      <td><code>label-cols-lg</code></td>
+      <td>Applies to breakpoint <code>xl</code> and up</td>
+    </tr>
+    <tr>
+      <td><code>label-cols-xl</code></td>
+      <td>Applies to breakpoint <code>xl</code> and up</td>
+    </tr>
+    <tr>
+      <td><code>content-cols</code></td>
+      <td>Applies to breakpoint <code>xs</code> up</td>
+    </tr>
+    <tr>
+      <td><code>content-cols-sm</code></td>
+      <td>Applies to breakpoint <code>sm</code> and up</td>
+    </tr>
+    <tr>
+      <td><code>content-cols-md</code></td>
+      <td>Applies to breakpoint <code>md</code> and up</td>
+    </tr>
+    <tr>
+      <td><code>content-cols-lg</code></td>
+      <td>Applies to breakpoint <code>xl</code> and up</td>
+    </tr>
+    <tr>
+      <td><code>content-cols-xl</code></td>
+      <td>Applies to breakpoint <code>xl</code> and up</td>
+    </tr>
+  </tbody>
+</table>
 
 <HighlightCard>
   <BFormGroup
diff --git a/apps/docs/src/docs/components/form-tags.md b/apps/docs/src/docs/components/form-tags.md
index 199476a7a..03e5bd0f7 100644
--- a/apps/docs/src/docs/components/form-tags.md
+++ b/apps/docs/src/docs/components/form-tags.md
@@ -16,11 +16,17 @@ Lightweight custom tagged input form control, with options for customized interf
 
 Tags are arrays of short strings, used in various ways such as assigning categories. Use the default user interface, or create your own custom interface via the use of the default scoped slot.
 
-## Docs to be written
+## Basic usage
 
-## Example
+Tags will have any leading and tailing whitespace removed, and duplicate tags are not permitted. Tags that contain spaces are permitted by default.
 
-<BCard class="bg-body-tertiary">
+Tags are added by clicking the Add button, pressing the <kbd>Enter</kbd> key or optionally when the change event fires on the new tag input (i.e. when focus moves from the input). The Add button will only appear when the user has entered a new tag value.
+
+<HighlightCard>
+  <label for="tags-basic">Type a new tag and press enter</label>
+  <BFormTags input-id="tags-basic" v-model="basicUsageTags" />
+  <p class="mt-2">Value: {{ basicUsageTags }}</p>
+  <template #html>
 
 ```vue
 <template>
@@ -34,8 +40,1322 @@ const value = ref<string[]>(['apple', 'orange'])
 </script>
 ```
 
-</BCard>
+  </template>
+</HighlightCard>
+
+## Tag creation using separators
+
+To auto create tags when a separator character is typed (i.e. <kbd>Space</kbd>, <kbd>,</kbd>, etc.), set the `separator` prop to the character that will trigger the tag to be added. If multiple separator characters are needed, then include them as a single string (i.e. ' ,;'), or an array of characters (i.e. `[' ', ',', ';']`), which will trigger a new tag to be added when <kbd>Space</kbd>, <kbd>,</kbd>, or <kbd>;</kbd> are typed). Separators must be a single character.
+
+The following example will auto create a tag when <kbd>Space</kbd>, <kbd>,</kbd>, or <kbd>;</kbd> are typed:
+
+<HighlightCard>
+  <label for="tags-separators">Enter tags separated by space, comma or semicolon</label>
+  <BFormTags
+  input-id="tags-separators"
+  v-model="usingSeparators"
+  separator=" ,;"
+  placeholder="Enter new tags separated by space, comma or semicolon"
+  no-add-on-enter></BFormTags>
+  <p class="mt-2">Value: {{ usingSeparators }}</p>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <label for="tags-separators">Enter tags separated by space, comma or semicolon</label>
+    <BFormTags
+      input-id="tags-separators"
+      v-model="value"
+      separator=" ,;"
+      placeholder="Enter new tags separated by space, comma or semicolon"
+      no-add-on-enter
+    ></BFormTags>
+    <p class="mt-2">Value: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref<string[]>(['apple', 'orange'])
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+## Last tag removal via backspace keypress
+
+When the prop `remove-on-delete` is set, and the user presses <kbd>Backspace</kbd> (or <kbd>Del</kbd>) and the input value is empty, the last tag in the tag list will be removed.
+
+<HighlightCard>
+  <label for="tags-separators">Enter tags separated by space, comma or semicolon</label>
+  <label for="tags-remove-on-delete">Enter new tags separated by space</label>
+  <BFormTags
+    input-id="tags-remove-on-delete"
+    :input-attrs="{ 'aria-describedby': 'tags-remove-on-delete-help' }"
+    v-model="tagRemoval"
+    separator=" "
+    placeholder="Enter new tags separated by space"
+    remove-on-delete
+    no-add-on-enter
+  ></BFormTags>
+  <BFormText id="tags-remove-on-delete-help" class="mt-2">
+    Press <kbd>Backspace</kbd> to remove the last tag entered
+  </BFormText>
+  <p>Value: {{ tagRemoval }}</p>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <label for="tags-remove-on-delete">Enter new tags separated by space</label>
+    <BFormTags
+      input-id="tags-remove-on-delete"
+      :input-attrs="{'aria-describedby': 'tags-remove-on-delete-help'}"
+      v-model="value"
+      separator=" "
+      placeholder="Enter new tags separated by space"
+      remove-on-delete
+      no-add-on-enter
+    ></BFormTags>
+    <BFormText id="tags-remove-on-delete-help" class="mt-2">
+      Press <kbd>Backspace</kbd> to remove the last tag entered
+    </BFormText>
+    <p>Value: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref<string[]>(['apple', 'orange', 'grape'])
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+## Styling Options
+
+Several props are available to alter the basic styling of the default tagged interface:
+
+<table class="b-table table table-bordered table-striped bv-docs-table">
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>tag-pills</code></td>
+      <td>Renders the tags with the appearance of pills</td>
+    </tr>
+    <tr>
+      <td><code>tag-variant</code></td>
+      <td>Applies one of the Bootstrap contextual variant theme colors to the tags</td>
+    </tr>
+    <tr>
+      <td><code>size</code></td>
+      <td>Set the size of the component's appearance. <code>sm</code>, <code>md</code> (default), or <code>lg</code></td>
+    </tr>
+    <tr>
+      <td><code>placeholder</code></td>
+      <td>The placeholder text for the new tag input element</td>
+    </tr>
+    <tr>
+      <td><code>state</code></td>
+      <td>
+        Sets the contextual state of the control. Set to <code>true</code> (for valid), <code>false</code> (for invalid), or <code>null</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>disabled</code></td>
+      <td>Places the component in a disabled state</td>
+    </tr>
+  </tbody>
+</table>
+
+For additional props, see the component reference section at the bottom of this page.
+
+The focus and validation state styling of the component relies upon BootstrapVue's custom CSS.
+
+<HighlightCard>
+  <label for="tags-pills">Enter tags</label>
+  <BFormTags
+    input-id="tags-pills"
+    v-model="stylingOptions"
+    tag-variant="primary"
+    tag-pills
+    size="lg"
+    separator=" "
+    placeholder="Enter new tags separated by space"></BFormTags>
+  <p class="mt-2">Value: {{ stylingOptions }}</p>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <label for="tags-pills">Enter tags</label>
+    <BFormTags
+      input-id="tags-pills"
+      v-model="value"
+      tag-variant="primary"
+      tag-pills
+      size="lg"
+      separator=" "
+      placeholder="Enter new tags separated by space"
+    ></BFormTags>
+    <p class="mt-2">Value: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref<string[]>(['apple', 'orange', 'grape'])
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+## Using with native browser `<form>` submission
+
+The value of the tagged input will not be submitted via standard form `action` unless you provide a name via the name prop. When a name is provided, `<BFormTags>` will create a hidden `<input>` for each tag. The hidden input will have the `name` attribute set to the value of the `name` prop.
+
+The hidden inputs will also be generated when using [custom rendering](#custom-rendering-with-default-scoped-slot) (when the `name` prop is set).
+
+## Tag validation
+
+By default, `<BFormTags>` detects when the user is attempting to enter a (case-sensitive) duplicate tag, and will provide integrated feedback to the user.
+
+You can optionally provide a tag validator method via the `tag-validator` prop. The validator function will receive one argument which is the tag being added, and should return either `true` if the tag passes validation and can be added, or `false` if the tag fails validation (in which case it is not added to the array of tags). Integrated feedback will be provided to the user listing the invalid tag(s) that could not be added.
+
+Tag validation occurs only for tags added via user input. Changes to the tags via the `v-model` are not validated.
+
+<HighlightCard>
+  <BFormGroup
+    label="Tags validation example"
+    label-for="tags-validation"
+    :state="stateTagValidator"
+    invalid-feedback="You must provide at least 3 tags and no more than 8"
+    description="Tags must be 3 to 5 characters in length and all lower case. Enter tags separated by spaces or press enter.">
+    <BFormTags
+        input-id="tags-validation"
+        v-model="tagsValidator"
+        :input-attrs="{ 'aria-describedby': 'tags-validation-help' }"
+        :tag-validator="tagValidator"
+        :state="stateTagValidator"
+        separator=" "
+      />
+  </BFormGroup>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <BFormGroup label="Tags validation example" label-for="tags-validation" :state="state">
+      <BFormTags
+        input-id="tags-validation"
+        v-model="tags"
+        :input-attrs="{'aria-describedby': 'tags-validation-help'}"
+        :tag-validator="tagValidator"
+        :state="state"
+        separator=" "
+      ></BFormTags>
+
+      <template #invalid-feedback> You must provide at least 3 tags and no more than 8 </template>
+
+      <template #description>
+        <div id="tags-validation-help">
+          Tags must be 3 to 5 characters in length and all lower case. Enter tags separated by
+          spaces or press enter.
+        </div>
+      </template>
+    </BFormGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+const dirty = ref<boolean>(false)
+const tags = ref<string[]>([])
+
+const state = computed(() => {
+  // Overall component validation state
+  return dirty.value ? tags.value.length > 2 && tags.value.length < 9 : null
+})
+
+watch(
+  () => tags.value,
+  (newValue, oldValue) => {
+    // Set the dirty flag on first change to the tags array
+    dirty.value = false
+  }
+)
+
+const tagValidator = (tag) => {
+  // Individual tag validator function
+  return tag === tag.toLowerCase() && tag.length > 2 && tag.length < 6
+}
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+### Detecting new, invalid, and duplicate tags
+
+The event `tag-state` will be emitted whenever new tags are entered into the new tag input element, tags that do not pass validation, or duplicate tags are detected. The event handler will receive three arrays as its arguments:
+
+- `validTags` (tags that pass validation)
+- `invalidTags` (tags that do not pass validation)
+- `duplicateTags` (tags that would be a duplicate of existing or validTags)
+
+The event will be emitted only when the new tag input changes (characters are entered that would be considered part of a tag), or when the user attempts to add a tag (i.e. via Enter, clicking the Add button, or entering a separator). The three arrays will be empty when the user clears the new tag input element (or contains just spaces).
+
+If you are providing your own feedback for duplicate and invalid tags (via the use of the tag-state event) outside of the `<BFormTags>` component, you can disable the built in duplicate and invalid messages by setting the props duplicate-tag-text and invalid-tag-text (respectively) to either an empty string ('') or null.
+
+<HighlightCard>
+  <label for="tags-state-event">Enter tags</label>
+  <BFormTags
+    input-id="tags-state-event"
+    v-model="detectingTags"
+    :tag-validator="detectTagValidator"
+    placeholder="Enter tags (3-5 characters) separated by space"
+    separator=" "
+    @tag-state="onTagState"></BFormTags>
+  <p class="mt-2">Tags: {{ detectingTags }}</p>
+  <p>Event values:</p>
+  <ul>
+    <li>validTags: {{ validTags }}</li>
+    <li>invalidTags: {{ invalidTags }}</li>
+    <li>duplicateTags: {{ duplicateTags }}</li>
+  </ul>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <label for="tags-state-event">Enter tags</label>
+    <BFormTags
+      input-id="tags-state-event"
+      v-model="tags"
+      :tag-validator="validator"
+      placeholder="Enter tags (3-5 characters) separated by space"
+      separator=" "
+      @tag-state="onTagState"
+    ></BFormTags>
+    <p class="mt-2">Tags: {{ tags }}</p>
+    <p>Event values:</p>
+    <ul>
+      <li>validTags: {{ validTags }}</li>
+      <li>invalidTags: {{ invalidTags }}</li>
+      <li>duplicateTags: {{ duplicateTags }}</li>
+    </ul>
+  </div>
+</template>
 
 <script setup lang="ts">
-import {BCard} from 'bootstrap-vue-next'
+const tags = ref<string[]>([])
+const validTags = ref<string[]>([])
+const invalidTags = ref<string[]>([])
+const duplicateTags = ref<string[]>([])
+const onTagState = (valid, invalid, duplicate) => {
+  validTags.value = valid
+  invalidTags.value = invalid
+  duplicateTags.value = duplicate
+}
+const validator = (tag) => {
+  return tag.length > 2 && tag.length < 6
+}
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+## Limiting tags
+
+If you want to limit the amount of tags the user is able to add use the `limit` prop. When configured, adding more tags than the `limit` allows is only possible by the `v-model`.
+
+When the limit of tags is reached, the user is still able to type but adding more tags is disabled. A message is shown to give the user feedback about the reached limit. This message can be configured by the `limit-tags-text` prop. Setting it to either an empty string (`''`) or `null` will disable the feedback.
+
+Removing tags is unaffected by the `limit` prop.
+
+<HighlightCard>
+  <label for="tags-limit">Enter tags</label>
+  <BFormTags input-id="tags-limit" v-model="limitTagsModel" :limit="limitTag" remove-on-delete></BFormTags>
+  <p class="mt-2">Value: {{ limitTagsModel }}</p>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <label for="tags-limit">Enter tags</label>
+    <BFormTags input-id="tags-limit" v-model="value" :limit="limit" remove-on-delete></BFormTags>
+    <p class="mt-2">Value: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref<string[]>([])
+const limit = ref<number>(5)
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+## Custom rendering with default scoped slot
+
+If you fancy a different look and feel for the tags control, you can provide your own custom rendering via the default scoped slot. You can either create your own tags, or use our helper `<BFormTag>` component.
+
+### Scope properties
+
+The default scoped slot provides numerous properties and methods for use in rendering your custom interface. Not all properties or methods are required to generate your interface.
+
+The default slot scope properties are as follows:
+
+<table class="b-table table table-bordered table-striped bv-docs-table">
+  <thead>
+    <tr>
+      <th>Property</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>addButtonText</code></td>
+      <td>String</td>
+      <td>The value of the <code>add-button-text</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>addButtonVariant</code></td>
+      <td>String</td>
+      <td>The value of the <code>add-button-variant</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>addTag</code></td>
+      <td>Function</td>
+      <td>Method to add a new tag. Assumes the tag is the value of the input, but optionally accepts one argument which is the tag value to be added</td>
+    </tr>
+    <tr>
+      <td><code>disableAddButton</code></td>
+      <td>Boolean</td>
+      <td>Will be <code>true</code> if the tag(s) in the input cannot be added (all invalid and/or duplicates)</td>
+    </tr>
+    <tr>
+      <td><code>disabled</code></td>
+      <td>Boolean</td>
+      <td><code>true</code> if the component is in the disabled state. Value of the <code>disabled</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>duplicateTagText</code></td>
+      <td>String</td>
+      <td>The value of the <code>duplicate-tag-text</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>duplicateTags</code></td>
+      <td>Array</td>
+      <td>Array of the duplicate tag(s) the user has entered</td>
+    </tr>
+    <tr>
+      <td><code>form</code></td>
+      <td>String</td>
+      <td>The value of the <code>form</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>inputAttrs</code></td>
+      <td>Object</td>
+      <td>Object of attributes to apply to the new tag input element via <code>v-bind="inputAttrs"</code>. See below for details</td>
+    </tr>
+    <tr>
+      <td><code>inputHandlers</code></td>
+      <td>Object</td>
+      <td>Object of event handlers to apply to the new tag input element via <code>v-on="inputHandlers"</code>. See below for details</td>
+    </tr>
+    <tr>
+      <td><code>inputId</code></td>
+      <td>String</td>
+      <td>ID to add to the new tag input element. Defaults to prop <code>input-id</code>. If not provided a unique ID is auto-generated. Also available via 'inputAttrs.id'</td>
+    </tr>
+    <tr>
+      <td><code>inputType</code></td>
+      <td>String</td>
+      <td>Type of input to render (normalized version of prop <code>input-type</code>)</td>
+    </tr>
+    <tr>
+      <td><code>invalidTagText</code></td>
+      <td>String</td>
+      <td>The value of the <code>invalid-tag-text</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>invalidTags</code></td>
+      <td>Array</td>
+      <td>Array of the invalid tag(s) the user has entered</td>
+    </tr>
+    <tr>
+      <td><code>isDuplicate</code></td>
+      <td>Boolean</td>
+      <td><code>true</code> if the user input contains duplicate tag(s)</td>
+    </tr>
+    <tr>
+      <td><code>isInvalid</code></td>
+      <td>Boolean</td>
+      <td><code>true</code> if the user input contains invalid tag(s)</td>
+    </tr>
+    <tr>
+      <td><code>isLimitReached</code></td>
+      <td>Boolean</td>
+      <td><code>true</code> if a <code>limit</code> is configured and the amount of tags has reached the limit</td>
+    </tr>
+    <tr>
+      <td><code>limitTagsText</code></td>
+      <td>String</td>
+      <td>The value of the <code>limit-tags-text</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>limitTagsText</code></td>
+      <td>String</td>
+      <td>The value of the <code>limit-tags-text</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>limit</code></td>
+      <td>String</td>
+      <td>The value of the <code>limit</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>noTagRemove</code></td>
+      <td>Boolean</td>
+      <td>The value of the <code>no-tag-remove</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>placeholder</code></td>
+      <td>String</td>
+      <td>The value of the <code>placeholder</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>removeTag</code></td>
+      <td>Function</td>
+      <td>Method to remove a tag. Accepts one argument which is the tag value to remove</td>
+    </tr>
+    <tr>
+      <td><code>required</code></td>
+      <td>Boolean</td>
+      <td>The value of the <code>required</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>separator</code></td>
+      <td>String</td>
+      <td>The value of the <code>separator</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>size</code></td>
+      <td>String</td>
+      <td>The value of the <code>size</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>state</code></td>
+      <td>Boolean</td>
+      <td>The contextual state of the component. Value of the <code>state</code> prop. Possible values are <code>true</code>, <code>false</code> or <code>null</code></td>
+    </tr>
+    <tr>
+      <td><code>tagClass</code></td>
+      <td>String, Array, or Object</td>
+      <td>The value of the <code>tag-variant</code> prop. Class (or classes) to apply to the tag elements</td>
+    </tr>
+    <tr>
+      <td><code>tagPills</code></td>
+      <td>Boolean</td>
+      <td>The value of the <code>tag-pills</code> prop.</td>
+    </tr>
+    <tr>
+      <td><code>tagRemoveLabel</code></td>
+      <td>String</td>
+      <td>Value of the <code>tag-remove-label</code> prop. Used as the <code>aria-label</code> attribute on the remove button of tags</td>
+    </tr>
+    <tr>
+      <td><code>tagVariant</code></td>
+      <td>String</td>
+      <td>Value of the <code>tag-variant</code> prop.</td>
+    </tr>
+    <tr>
+      <td><code>tags</code></td>
+      <td>Array</td>
+      <td>Array of current tag strings</td>
+    </tr>
+  </tbody>
+</table>
+
+#### `inputAttrs` object properties
+
+The `inputAttrs` object contains attributes to bind (`v-bind`) to the new tag input element.
+
+<table class="b-table table table-bordered table-striped bv-docs-table">
+  <thead>
+    <tr>
+      <th>Property</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>disabled</code></td>
+      <td>Boolean</td>
+      <td>The <code>disabled</code> attribute for the new tag input. Value of the <code>disabled</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>form</code></td>
+      <td>String</td>
+      <td>The value of the <code>form</code> prop</td>
+    </tr>
+    <tr>
+      <td><code>id</code></td>
+      <td>String</td>
+      <td>The <code>id</code> attribute for the new tag input</td>
+    </tr>
+    <tr>
+      <td><code>value</code></td>
+      <td>String</td>
+      <td>The <code>value</code> attribute for the new tag input</td>
+    </tr>
+  </tbody>
+</table>
+
+The `inputAttrs` object will also include any attributes set via the `input-attrs` prop. Note that the above attributes take precedence over any of the same attributes specified in the `input-attrs` prop.
+
+#### `inputHandlers` object properties
+
+The `inputHandlers` object contains event handlers to bind (`v-on`) to the new tag input element.
+
+<table class="b-table table table-bordered table-striped bv-docs-table">
+  <thead>
+    <tr>
+      <th>Property</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>change</code></td>
+      <td>Function</td>
+      <td>Event handler for the input element <code>change</code> event. Accepts a single argument of either an event object or a string. Change will trigger adding the tag.</td>
+    </tr>
+    <tr>
+      <td><code>input</code></td>
+      <td>Function</td>
+      <td>Event handler for the input element <code>input</code> event. Accepts a single argument of either an event object or a string. Updates the internal v-model for the new tag input element</td>
+    </tr>
+    <tr>
+      <td><code>keydown</code></td>
+      <td>Function</td>
+      <td>Event handler for the input element keydown <kbd>Enter</kbd> and <kbd>Del</kbd> events. Accepts a single argument which is the native keydown event object</td>
+    </tr>
+  </tbody>
+</table>
+
+The `change` handler, when needed, must be enabled via the `add-on-change` prop, otherwise it is a noop method.
+
+### Using native browser inputs
+
+The scope contains attributes and event handlers that can be directly bound to native `<input>` or `<select>` elements.
+
+The following example includes the suggested ARIA attributes and roles needed for screen-reader support.
+
+<HighlightCard>
+  <BFormTags v-model="nativeTags" no-outer-focus class="mb-2">
+    <template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
+      <BInputGroup aria-controls="my-custom-tags-list">
+        <input
+          v-on="inputHandlers"
+          placeholder="New tag - Press enter to add"
+          class="form-control">
+        <BInputGroupAppend>
+          <BButton @click="addTag()" variant="primary">Add</BButton>
+        </BInputGroupAppend>
+      </BInputGroup>
+      <ul
+        id="my-custom-tags-list"
+        class="list-unstyled d-inline-flex flex-wrap mb-0"
+        aria-live="polite"
+        aria-atomic="false"
+        aria-relevant="additions removals"
+      >
+        <BCard
+          v-for="tag in tags"
+          :key="tag"
+          :id="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
+          tag="li"
+          class="mt-1 me-1"
+          body-class="py-1 pe-2 text-nowrap"
+        >
+          <strong>{{ tag }}</strong>
+          <BButton
+            @click="removeTag(tag)"
+            variant="link"
+            size="sm"
+            :aria-controls="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
+          >remove</BButton>
+        </BCard>
+      </ul>
+    </template>
+  </BFormTags>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <BFormTags v-model="value" no-outer-focus class="mb-2">
+      <template v-slot="{tags, inputAttrs, inputHandlers, addTag, removeTag}">
+        <BInputGroup aria-controls="my-custom-tags-list">
+          <input
+            v-bind="inputAttrs"
+            v-on="inputHandlers"
+            placeholder="New tag - Press enter to add"
+            class="form-control"
+          />
+          <BInputGroupAppend>
+            <BButton @click="addTag()" variant="primary">Add</BButton>
+          </BInputGroupAppend>
+        </BInputGroup>
+        <ul
+          id="my-custom-tags-list"
+          class="list-unstyled d-inline-flex flex-wrap mb-0"
+          aria-live="polite"
+          aria-atomic="false"
+          aria-relevant="additions removals"
+        >
+          <!-- Always use the tag value as the :key, not the index! -->
+          <!-- Otherwise screen readers will not read the tag additions and removals correctly -->
+          <BCard
+            v-for="tag in tags"
+            :key="tag"
+            :id="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
+            tag="li"
+            class="mt-1 me-1"
+            body-class="py-1 pe-2 text-nowrap"
+          >
+            <strong>{{ tag }}</strong>
+            <BButton
+              @click="removeTag(tag)"
+              variant="link"
+              size="sm"
+              :aria-controls="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
+              >remove</BButton
+            >
+          </BCard>
+        </ul>
+      </template>
+    </BFormTags>
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref<string[]>(['apple', 'orange', 'banana', 'pear', 'peach'])
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+### Using custom form components
+
+The scope contains attributes and event handlers that can be directly bound to most custom inputs or select components (the event handlers accept either a string tag value or a native event object). Any component that emits `input` as characters are typed, and (optionally) emits `change` when the input value changes (i.e on blur or select), and uses the prop `value` as the v-model, should work without modification.
+
+In this example, we are using the [`<BFormTag>` helper component](#bformtag-helper-component), but feel free to render tags using standard HTML or components.
+
+<HighlightCard>
+  <BFormTags v-model="customComponentTags" no-outer-focus class="mb-2">
+    <template v-slot="{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag }">
+      <BInputGroup class="mb-2">
+        <BFormInput
+          v-bind="inputAttrs"
+          v-on="inputHandlers"
+          placeholder="New tag - Press enter to add"
+          class="form-control"
+        ></BFormInput>
+        <BInputGroupAppend>
+          <BButton @click="addTag()" variant="primary">Add</BButton>
+        </BInputGroupAppend>
+      </BInputGroup>
+      <div class="d-inline-block" style="font-size: 1.5rem;">
+        <BFormTag
+          v-for="tag in tags"
+          @remove="removeTag(tag)"
+          :key="tag"
+          :title="tag"
+          :variant="tagVariant"
+          class="me-1"
+        >{{ tag }}</BFormTag>
+      </div>
+    </template>
+  </BFormTags>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <BFormTags v-model="value" no-outer-focus class="mb-2">
+      <template v-slot="{tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag}">
+        <BInputGroup class="mb-2">
+          <BFormInput
+            v-bind="inputAttrs"
+            v-on="inputHandlers"
+            placeholder="New tag - Press enter to add"
+            class="form-control"
+          ></BFormInput>
+          <BInputGroupAppend>
+            <BButton @click="addTag()" variant="primary">Add</BButton>
+          </BInputGroupAppend>
+        </BInputGroup>
+        <div class="d-inline-block" style="font-size: 1.5rem;">
+          <BFormTag
+            v-for="tag in tags"
+            @remove="removeTag(tag)"
+            :key="tag"
+            :title="tag"
+            :variant="tagVariant"
+            class="me-1"
+            >{{ tag }}</BFormTag
+          >
+        </div>
+      </template>
+    </BFormTags>
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref<string[]>(['apple', 'orange', 'banana'])
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+The following is an example of using a custom select component for choosing from a pre-defined set of tags:
+
+<HighlightCard>
+  <BFormGroup label="Tagged input using select" label-for="tags-component-select">
+    <BFormTags
+      id="tags-component-select"
+      v-model="customPredefinedTags"
+      size="lg"
+      class="mb-2"
+      add-on-change
+      no-outer-focus
+    >
+      <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">
+            <BFormTag
+              @remove="removeTag(tag)"
+              :title="tag"
+              :disabled="disabled"
+              variant="info"
+            >{{ tag }}</BFormTag>
+          </li>
+        </ul>
+        <BFormSelect
+          v-bind="inputAttrs"
+          v-on="inputHandlers"
+          :disabled="disabled || availableOptions.length === 0"
+          :options="availableOptions"
+        >
+        </BFormSelect>
+      </template>
+    </BFormTags>
+  </BFormGroup>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <BFormGroup label="Tagged input using select" label-for="tags-component-select">
+      <!-- Prop `add-on-change` is needed to enable adding tags vie the `change` event -->
+      <BFormTags
+        id="tags-component-select"
+        v-model="value"
+        size="lg"
+        class="mb-2"
+        add-on-change
+        no-outer-focus
+      >
+        <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">
+              <BFormTag @remove="removeTag(tag)" :title="tag" :disabled="disabled" variant="info">{{
+                tag
+              }}</BFormTag>
+            </li>
+          </ul>
+          <BFormSelect
+            v-bind="inputAttrs"
+            v-on="inputHandlers"
+            :disabled="disabled || availableOptions.length === 0"
+            :options="availableOptions"
+          >
+            <template #first>
+              <!-- This is required to prevent bugs with Safari -->
+              <option disabled value="">Choose a tag...</option>
+            </template>
+          </BFormSelect>
+        </template>
+      </BFormTags>
+    </BFormGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+const value = ref<string[]>([])
+const options = ref<string[]>([
+  'Apple',
+  'Orange',
+  'Banana',
+  'Lime',
+  'Peach',
+  'Chocolate',
+  'Strawberry',
+])
+const availableOptions = computed(() => {
+  return options.value.filter((opt) => customPredefinedTags.value.indexOf(opt) === -1)
+})
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+If the custom input is using custom event names that mimic `input` and `change`, and/or needs the `.native` modifier for keydown, you can do something similar to below to bind the event handlers:
+
+<HighlightCard>
+
+```vue
+<template #default="{inputAttrs, inputHandlers, removeTag, tags}">
+  <custom-input
+    :id="inputAttrs.id"
+    :custom-value-prop="inputAttrs.value"
+    @custom-input-event="inputHandlers.input($event)"
+    @custom-change-event="inputHandlers.change($event)"
+    @keydown.native="inputHandlers.keydown($event)"
+  ></custom-input>
+  <template v-for="tag in tags">
+    <!-- Your custom tag list here -->
+  </template>
+</template>
+```
+
+</HighlightCard>
+
+The `inputHandlers.input` handler must be bound to an event that updates with each character entered by the user for the <i>as-you-type</i> tag validation to work.
+
+### Advanced custom rendering usage
+
+In situations where the `inputHandlers` will not work with your custom input, or if you need greater control over tag creation, you can take advantage of the additional properties provided via the default slot's scope.
+
+<HighlightCard>
+  <BFormCheckbox switch size="lg" v-model="advancedDisabled">Disable</BFormCheckbox>
+  <BFormTags
+    v-model="advancedTags"
+    @input="resetInputValue()"
+    tag-variant="success"
+    class="mb-2 mt-2"
+    :disabled="advancedDisabled"
+    no-outer-focus
+    placeholder="Enter a new tag value and click Add"
+    :state="advancedState">
+    <template v-slot="{tags, inputId, placeholder, disabled, addTag, removeTag }">
+      <BInputGroup>
+        <BFormInput
+          v-model="newTag"
+          :id="inputId"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :formatter="formatter"
+        ></BFormInput>
+        <BInputGroupAppend>
+          <BButton @click="addTag(newTag)" :disabled="disabled" variant="primary">Add</BButton>
+        </BInputGroupAppend>
+      </BInputGroup>
+      <BFormInvalidFeedback :state="advancedState">
+        Duplicate tag value cannot be added again!
+      </BFormInvalidFeedback>
+      <ul v-if="tags.length > 0" class="mb-0">
+        <li v-for="tag in tags" :key="tag" :title="`Tag: ${tag}`" class="mt-2">
+          <span  class="d-flex align-items-center">
+            <span class="me-2">{{ tag }}</span>
+            <BButton
+              :disabled="disabled"
+              size="sm"
+              variant="outline-danger"
+              @click="removeTag(tag)" >
+              remove tag
+            </BButton>
+          </span>
+        </li>
+      </ul>
+      <BFormText v-else>
+        There are no tags specified. Add a new tag above.
+      </BFormText>
+    </template>
+  </BFormTags>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <BFormCheckbox switch size="lg" v-model="disabled">Disable</BFormCheckbox>
+    <BFormTags
+      v-model="advancedTags"
+      @input="resetInputValue()"
+      tag-variant="success"
+      class="mb-2 mt-2"
+      :disabled="disabled"
+      no-outer-focus
+      placeholder="Enter a new tag value and click Add"
+      :state="state"
+    >
+      <template v-slot="{tags, inputId, placeholder, disabled, addTag, removeTag}">
+        <BInputGroup>
+          <!-- Always bind the id to the input so that it can be focused when needed -->
+          <BFormInput
+            v-model="newTag"
+            :id="inputId"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :formatter="formatter"
+          ></BFormInput>
+          <BInputGroupAppend>
+            <BButton @click="addTag(newTag)" :disabled="disabled" variant="primary">Add</BButton>
+          </BInputGroupAppend>
+        </BInputGroup>
+        <BFormInvalidFeedback :state="advancedState">
+          Duplicate tag value cannot be added again!
+        </BFormInvalidFeedback>
+        <ul v-if="tags.length > 0" class="mb-0">
+          <li v-for="tag in tags" :key="tag" :title="`Tag: ${tag}`" class="mt-2">
+            <span class="d-flex align-items-center">
+              <span class="me-2">{{ tag }}</span>
+              <BButton
+                :disabled="disabled"
+                size="sm"
+                variant="outline-danger"
+                @click="removeTag(tag)"
+              >
+                remove tag
+              </BButton>
+            </span>
+          </li>
+        </ul>
+        <BFormText v-else> There are no tags specified. Add a new tag above. </BFormText>
+      </template>
+    </BFormTags>
+  </div>
+</template>
+
+<script setup lang="ts">
+const newTag = ref<string>('')
+const disabled = ref<boolean>(false)
+const value = ref<string[]>([])
+const state = computed(() => {
+  // Return false (invalid) if new tag is a duplicate
+  return value.value.indexOf(newTag.value.trim()) > -1 ? false : null
+})
+const resetInputValue = () => {
+  newTag.value = ''
+}
+const formatter = (value) => {
+  return value.toUpperCase()
+}
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+The following is an example of using the `<BDropdown>` component for choosing or searching from a pre-defined set of tags:
+
+<HighlightCard>
+  <BFormGroup label="Tagged input using dropdown" label-for="tags-with-dropdown">
+    <BFormTags id="tags-with-dropdown" v-model="customDropdownTags" 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">
+            <BFormTag
+              @remove="removeTag(tag)"
+              :title="tag"
+              :disabled="disabled"
+              variant="info"
+            >{{ tag }}</BFormTag>
+          </li>
+        </ul>
+        <BDropdown size="sm" variant="outline-secondary" block menu-class="w-100" no-caret class="w-100">
+          <template #button-content>
+            &#x1f50d; <span>Choose tags</span>
+          </template>
+          <BDropdownForm @submit.stop.prevent="() => {}">
+            <BFormGroup
+              label="Search tags"
+              label-for="tag-search-input"
+              label-cols-md="auto"
+              class="mb-0"
+              label-size="sm"
+              :description="searchDesc"
+              :disabled="disabled"
+            >
+              <BFormInput
+                v-model="customDropdownSearch"
+                id="tag-search-input"
+                type="search"
+                size="sm"
+                autocomplete="off"
+                ></BFormInput>
+            </BFormGroup>
+          </BDropdownForm>
+          <BDropdownDivider></BDropdownDivider>
+          <BDropdownItemButton
+            v-for="option in customDropdownAvailableOptions"
+            :key="option"
+            @click="onOptionClick({ option, addTag })"
+          >
+            {{ option }}
+          </BDropdownItemButton>
+          <BDropdownText v-if="availableOptions.length === 0">
+            There are no tags available to select
+          </BDropdownText>
+        </BDropdown>
+      </template>
+    </BFormTags>
+  </BFormGroup>
+  <template #html>
+
+```vue
+<template>
+  <div>
+    <BFormGroup label="Tagged input using dropdown" label-for="tags-with-dropdown">
+      <BFormTags id="tags-with-dropdown" 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">
+              <BFormTag @remove="removeTag(tag)" :title="tag" :disabled="disabled" variant="info">{{
+                tag
+              }}</BFormTag>
+            </li>
+          </ul>
+
+          <BDropdown size="sm" variant="outline-secondary" block menu-class="w-100" no-caret>
+            <template #button-content> &#x1f50d; <span>Choose tags</span> </template>
+            <BDropdownForm @submit.stop.prevent="() => {}">
+              <BFormGroup
+                label="Search tags"
+                label-for="tag-search-input"
+                label-cols-md="auto"
+                class="mb-0"
+                label-size="sm"
+                :description="searchDesc"
+                :disabled="disabled"
+              >
+                <BFormInput
+                  v-model="search"
+                  id="tag-search-input"
+                  type="search"
+                  size="sm"
+                  autocomplete="off"
+                ></BFormInput>
+              </BFormGroup>
+            </BDropdownForm>
+            <BDropdownDivider></BDropdownDivider>
+            <BDropdownItemButton
+              v-for="option in availableOptions"
+              :key="option"
+              @click="onOptionClick({option, addTag})"
+            >
+              {{ option }}
+            </BDropdownItemButton>
+            <BDropdownText v-if="availableOptions.length === 0">
+              There are no tags available to select
+            </BDropdownText>
+          </BDropdown>
+        </template>
+      </BFormTags>
+    </BFormGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+const options = ref<string[]>([
+  'Apple',
+  'Orange',
+  'Banana',
+  'Lime',
+  'Peach',
+  'Chocolate',
+  'Strawberry',
+])
+const search = ref<string>('')
+const value = ref<string[]>([])
+
+const criteria = computed(() => search.value.trim().toLowerCase())
+const availableOptions = computed(() => {
+  const searchCriteria = criteria.value
+
+  // Filter out already selected options
+  const optionsFiltered = options.value.filter((opt) => value.value.indexOf(opt) === -1)
+  if (searchCriteria) {
+    // Show only options that match criteria
+    return optionsFiltered.filter((opt) => opt.toLowerCase().indexOf(searchCriteria) > -1)
+  }
+  // Show all options available
+  return optionsFiltered
+})
+const searchDesc = computed(() => {
+  if (criteria.value && availableOptions.value.length === 0) {
+    return 'There are no tags matching your search criteria'
+  }
+  return ''
+})
+const onOptionClick = ({option, addTag}) => {
+  addTag(option)
+  search.value = ''
+}
+</script>
+```
+
+  </template>
+</HighlightCard>
+
+### Creating wrapper components
+
+You can easily create a custom wrapper component with your preferred rendering style as follows:
+
+<HighlightCard>
+
+```vue
+<template>
+  <BFormTags :value="modelValue" @input="$emit('input', $event)">
+    <template v-slot="{tags, addTag, removeTag, inputAttrs, inputHandlers}">
+      <!-- Place your custom rendering here -->
+    </template>
+  </BFormTags>
+</template>
+
+<script setup lang="ts">
+
+defineProps({
+  modelValue: string[]
+})
+
+const value = ref<string[]>([])
+</script>
+```
+
+</HighlightCard>
+
+## `<BFormTag>` helper component
+
+BootstrapVue provides the helper component `<BFormTag>`, for use with the default scoped slot of `<BFormTags>`. The component is based upon [`<BBadge>`](/docs/components/badge) and [`<BButton>`](/docs/components/button).
+
+`<BFormTag>` supports the same variants as `<BBadge>` and also supports pill styling. Sizing is based on the containing element's font-size.
+
+The remove event is emitted when the `<BFormTag>` remove button is clicked.
+
+Tags that are too wide for their parent container will automatically have their text content truncated with an ellipsis. For this reason, it is always good practice to supply a title via the title prop when using the default slot of `<BFormTag>` for the tag content.
+
+Note `<BFormTag>` requires BootstrapVue's custom CSS/SCSS for proper styling.
+
+<ComponentReference :data="data" />
+
+<script setup lang="ts">
+  import {data} from '../../data/components/formTags.data'
+  import ComponentReference from '../../components/ComponentReference.vue'
+  import HighlightCard from '../../components/HighlightCard.vue'
+  import {BFormTags, BFormText, BFormGroup, BInputGroupAppend, BButton, BCard, BInputGroup, BFormTag, BFormInput, BFormSelect, BFormCheckbox, BFormInvalidFeedback, BDropdownForm, BDropdownDivider, BDropdownItemButton, BDropdownText, BDropdown} from 'bootstrap-vue-next'
+  import {ref, computed, watch} from 'vue'
+
+  const basicUsageTags = ref<string[]>([])
+  const usingSeparators = ref<string[]>(['apple', 'orange'])
+  const tagRemoval = ref<string[]>(['apple', 'orange', 'grape'])
+  const stylingOptions = ref<string[]>(['apple', 'orange', 'grape'])
+
+  const tagsValidator = ref<string[]>([])
+  const dirty = ref<boolean>(false)
+  const stateTagValidator = computed(() => {
+    // Overall component validation state
+    return dirty.value ? (tagsValidator.value.length > 2 && tagsValidator.value.length < 9) : null
+  })
+
+  watch(() => tagsValidator.value, (newValue, oldValue) => {
+    // Set the dirty flag on first change to the tags array
+    dirty.value = false
+  })
+
+  const tagValidator = (tag) => {
+    // Individual tag validator function
+    return tag === tag.toLowerCase() && tag.length > 2 && tag.length < 6
+  }
+
+  const detectingTags = ref<string[]>([])
+  const validTags = ref<string[]>([])
+  const invalidTags = ref<string[]>([])
+  const duplicateTags = ref<string[]>([])
+  const onTagState = (valid, invalid, duplicate) => {
+    validTags.value = valid
+    invalidTags.value = invalid
+    duplicateTags.value = duplicate
+  }
+  const detectTagValidator = (tag) => {
+    return tag.length > 2 && tag.length < 6
+  }
+
+  const limitTagsModel = ref<string[]>([])
+  const limitTag = ref<number>(5)
+
+  const nativeTags = ref<string[]>(['apple', 'orange', 'banana', 'pear', 'peach'])
+
+  const customComponentTags = ref<string[]>(['apple', 'orange', 'banana'])
+
+  const customPredefinedTags = ref<string[]>([])
+  const options = ref<string[]>(['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'])
+  const availableOptions = computed(() => {
+    return options.value.filter(opt => customPredefinedTags.value.indexOf(opt) === -1)
+  })
+
+  const advancedDisabled = ref<boolean>(false)
+  const advancedTags = ref<string[]>([])
+  const newTag = ref<string>('')
+  const advancedState = computed(() => advancedTags.value.indexOf(newTag.value.trim()) > -1 ? false : null)
+  const resetInputValue = () => {
+        newTag.value = ''
+  }
+  const formatter = (value) => {
+    return value.toUpperCase()
+  }
+
+  const customDropdownOptions = ref<string[]>(['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'])
+  const customDropdownSearch = ref<string>('')
+  const customDropdownTags = ref<string[]>([])
+  
+  const criteria = computed(() => customDropdownSearch.value.trim().toLowerCase())
+  const customDropdownAvailableOptions = computed(() => {
+  const searchCriteria = criteria.value
+  
+  // Filter out already selected options
+  const optionsFiltered = customDropdownOptions.value.filter(opt => customDropdownTags.value.indexOf(opt) === -1)
+    if (searchCriteria) {
+      // Show only options that match criteria
+      return optionsFiltered.filter(opt => opt.toLowerCase().indexOf(searchCriteria) > -1);
+    }
+    // Show all options available
+    return optionsFiltered
+  })
+  const searchDesc = computed(() => {
+    if (criteria.value && customDropdownAvailableOptions.value.length === 0) {
+      return 'There are no tags matching your search criteria'
+    }
+    return ''
+  })
+  const onOptionClick = ({ option, addTag }) => {
+    addTag(option)
+    searchCriteria.value = ''
+  }
+ 
 </script>
diff --git a/apps/docs/src/docs/components/form.md b/apps/docs/src/docs/components/form.md
index 812c89313..d424511cc 100644
--- a/apps/docs/src/docs/components/form.md
+++ b/apps/docs/src/docs/components/form.md
@@ -295,18 +295,18 @@ See also:
 - [`BFormSelect`](/docs/components/form-select) Select input
 - [`BFormRadio`](/docs/components/form-radio) Radio Inputs
 - [`BFormCheckbox`](/docs/components/form-checkbox) Checkbox Inputs
-- ~~[`BFormFile`](/docs/components/form-file) File Input~~
-- ~~[`BFormDatepicker`](/docs/components/form-datepicker) Date picker input~~
-- ~~[`BFormSpinbutton`](/docs/components/form-spinbutton) Numerical range spinbutton input~~
-- ~~[`BFormTags`](/docs/components/form-tags) Customizable tag input~~
-- ~~[`BFormTimepicker`](/docs/components/form-timepicker) Time picker custom form input~~
-- ~~[`BFormRating`](/docs/components/form-rating) Star rating custom form input and display~~
+- [`BFormFile`](/docs/components/form-file) File Input
+- [`BFormDatepicker`](/docs/components/form-datepicker) Date picker input
+- [`BFormSpinbutton`](/docs/components/form-spinbutton) Numerical range spinbutton input
+- [`BFormTags`](/docs/components/form-tags) Customizable tag input~~
+- [`BFormTimepicker`](/docs/components/form-timepicker) Time picker custom form input
+- [`BFormRating`](/docs/components/form-rating) Star rating custom form input and display
 - [`BButton`](/docs/components/button) Buttons
 - [`BFormGroup`](/docs/components/form-group) Form Input wrapper to generate form-groups that
   support labels, help text and feedback
 - [`BInputGroup`](/docs/components/input) Form Inputs with add-ons
-- ~~[`BFormRow`](/docs/components/layout) Create grid rows and columns with tighter margins
-  (available via the [Layout and grid components](/docs/components/layout))~~
+- [`BFormRow`](/docs/components/layout) Create grid rows and columns with tighter margins
+  (available via the [Layout and grid components](/docs/components/layout))
 
 ## Form helper components
 
@@ -315,7 +315,7 @@ The following helper components are available with the `Form` plugin:
 - `BFormText` Help text blocks for inputs
 - `BFormInvalidFeedback` Invalid feedback text blocks for input `invalid` states
 - `BFormValidFeedback` Valid feedback text blocks for input `valid` states
-- ~~`BFormDatalist` Easily create a `<datalist>` for use with `BFormInput` or plain `<input>`~~
+- `BFormDatalist` Easily create a `<datalist>` for use with `BFormInput` or plain `<input>`
 
 ### Form text helper
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
index 45db11a9b..d9a7df25c 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
@@ -104,8 +104,8 @@
         <small v-if="isDuplicate" class="form-text text-body-secondary"
           >{{ duplicateTagText }}: {{ inputValue }}</small
         >
-        <small v-if="tags.length === limit" class="form-text text-body-secondary"
-          >Tag limit reached</small
+        <small v-if="tags.length === limit" class="form-text text-body-secondary">
+          {{ limitTagsText }}</small
         >
       </div>
     </slot>
@@ -116,8 +116,8 @@
 </template>
 
 <script setup lang="ts">
+import {onKeyStroke, syncRef, useFocus, useToNumber, useVModel} from '@vueuse/core'
 import {computed, ref, toRef} from 'vue'
-import BFormTag from './BFormTag.vue'
 import {useId, useStateClass} from '../../composables'
 import type {
   AttrsValue,
@@ -128,8 +128,8 @@ import type {
   Numberish,
   Size,
 } from '../../types'
-import {onKeyStroke, syncRef, useFocus, useToNumber, useVModel} from '@vueuse/core'
 import {escapeRegExpChars} from '../../utils'
+import BFormTag from './BFormTag.vue'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/form-tags.spec.ts b/packages/bootstrap-vue-next/src/components/BFormTags/form-tags.spec.ts
new file mode 100644
index 000000000..fa92bd23d
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/form-tags.spec.ts
@@ -0,0 +1,29 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe} from 'node:test'
+import {expect, it} from 'vitest'
+import BFormTags from './BFormTags.vue'
+
+// Add unit testing only for limitTag
+describe('form-tags', () => {
+  enableAutoUnmount(afterEach)
+
+  describe('BFormTags attributes', () => {
+    it('tag is div', () => {
+      const wrapper = mount(BFormTags)
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('should show limitTagsText when it´s defined', () => {
+      const wrapper = mount(BFormTags, {
+        props: {
+          limit: 2,
+          limitTagsText: 'Foo',
+          modelValue: ['apple', 'orange'],
+        },
+      })
+
+      const $smallElement = wrapper.get('small')
+      expect($smallElement.text()).toBe('Foo')
+    })
+  })
+})