From 15da5cf71e5bf81cd4e388e7d64666fb1d7ec11f Mon Sep 17 00:00:00 2001
From: Vann <125730430+vanngoh@users.noreply.github.com>
Date: Fri, 14 Feb 2025 23:30:01 +0900
Subject: [PATCH] docs(input): add example for `maxlength` (#3110)

---
 .../content/examples/InputExampleMaxLength.vue    | 15 +++++++++++++++
 docs/content/2.components/input.md                |  7 +++++++
 2 files changed, 22 insertions(+)
 create mode 100644 docs/components/content/examples/InputExampleMaxLength.vue

diff --git a/docs/components/content/examples/InputExampleMaxLength.vue b/docs/components/content/examples/InputExampleMaxLength.vue
new file mode 100644
index 00000000..4846bf64
--- /dev/null
+++ b/docs/components/content/examples/InputExampleMaxLength.vue
@@ -0,0 +1,15 @@
+<template>
+  <UInput
+    v-model="name"
+    :maxlength="maxLength"
+  >
+    <template #trailing>
+      <span class="text-xs text-gray-500 dark:text-gray-400">{{ name.length }}/{{ maxLength }}</span>
+    </template>
+  </UInput>
+</template>
+
+<script setup lang="ts">
+const name = ref('')
+const maxLength = 10
+</script>
diff --git a/docs/content/2.components/input.md b/docs/content/2.components/input.md
index 38d9686d..bb1d4613 100644
--- a/docs/content/2.components/input.md
+++ b/docs/content/2.components/input.md
@@ -173,6 +173,13 @@ baseProps:
 ---
 ::
 
+### Limit
+
+Use the `maxlength` prop to limit the length of the Input.
+
+:component-example{component="input-example-max-length"}
+
+
 ## Slots
 
 ### `leading`