From b96a1ccbabd07d5f7dfc85bd03714629bb2ce2e7 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 1 Jul 2025 10:34:46 +0200
Subject: [PATCH] feat(InputTags): add `max-length` prop

Resolves #4405
---
 docs/content/3.components/input-tags.md | 11 +++++++++++
 src/runtime/components/InputTags.vue    |  3 +++
 2 files changed, 14 insertions(+)

diff --git a/docs/content/3.components/input-tags.md b/docs/content/3.components/input-tags.md
index 1f642dd3..c73185dc 100644
--- a/docs/content/3.components/input-tags.md
+++ b/docs/content/3.components/input-tags.md
@@ -51,6 +51,17 @@ props:
 ---
 ::
 
+### Max Length :badge{label="Soon" class="align-text-top"}
+
+Use the `max-length` prop to set the maximum number of characters allowed in a tag.
+
+::component-code
+---
+props:
+  maxLength: 4
+---
+::
+
 ### Color
 
 Use the `color` prop to change the ring color when the InputTags is focused.
diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue
index 17bbd1c7..973d3dfb 100644
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -18,6 +18,8 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
   as?: any
   /** The placeholder text when the input is empty. */
   placeholder?: string
+  /** The maximum number of character allowed. */
+  maxLength?: number
   /**
    * @defaultValue 'primary'
    */
@@ -182,6 +184,7 @@ defineExpose({
       ref="inputRef"
       v-bind="{ ...$attrs, ...ariaAttrs }"
       :placeholder="placeholder"
+      :max-length="maxLength"
       :class="ui.input({ class: props.ui?.input })"
     />