From 81ec4e781f96ef8051607d6e970ccb61baa1c788 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Wed, 12 Nov 2025 14:18:40 +0000
Subject: [PATCH 1/2] fix: tags overflow

---
 .changeset/fix-tags-input-overflow.md         |  7 ++++++
 .../examples/tags-input-with-long-tags.tsx    | 25 +++++++++++++++++++
 .../src/slot-recipes/tags-input.ts            |  6 +++++
 .../react/__stories__/tags-input.stories.tsx  |  1 +
 .../react/src/theme/recipes/tags-input.ts     |  7 ++++++
 5 files changed, 46 insertions(+)
 create mode 100644 .changeset/fix-tags-input-overflow.md
 create mode 100644 apps/compositions/src/examples/tags-input-with-long-tags.tsx

diff --git a/.changeset/fix-tags-input-overflow.md b/.changeset/fix-tags-input-overflow.md
new file mode 100644
index 00000000000..c6d533e5820
--- /dev/null
+++ b/.changeset/fix-tags-input-overflow.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/react": patch
+"@chakra-ui/panda-preset": patch
+---
+
+- **TagsInput**: Fix overflow issue where very long tags would overflow the
+  container instead of truncating with ellipsis.
diff --git a/apps/compositions/src/examples/tags-input-with-long-tags.tsx b/apps/compositions/src/examples/tags-input-with-long-tags.tsx
new file mode 100644
index 00000000000..4cc9457de23
--- /dev/null
+++ b/apps/compositions/src/examples/tags-input-with-long-tags.tsx
@@ -0,0 +1,25 @@
+import { Span, TagsInput } from "@chakra-ui/react"
+
+export const TagsInputWithLongTags = () => {
+  return (
+    <TagsInput.Root
+      maxW="md"
+      defaultValue={[
+        "verylongemailaddressthatdoesnthavespaces@example.com",
+        "anothersuperlongemailaddresswithoutanyspaceswhatsoever@verylongdomainname.com",
+        "short@email.com",
+        "mediumlengthemail@domain.co.uk",
+        "extremelylongemailaddressthatshouldtruncateproperly@verylongdomainname.example.com",
+      ]}
+    >
+      <TagsInput.Label>Email Addresses</TagsInput.Label>
+      <TagsInput.Control>
+        <TagsInput.Items />
+        <TagsInput.Input placeholder="Add email address..." />
+      </TagsInput.Control>
+      <Span textStyle="xs" color="fg.muted" ms="auto">
+        Long tags should truncate with ellipsis
+      </Span>
+    </TagsInput.Root>
+  )
+}
diff --git a/packages/panda-preset/src/slot-recipes/tags-input.ts b/packages/panda-preset/src/slot-recipes/tags-input.ts
index 3c99ba3c248..4e81e553183 100644
--- a/packages/panda-preset/src/slot-recipes/tags-input.ts
+++ b/packages/panda-preset/src/slot-recipes/tags-input.ts
@@ -62,8 +62,13 @@ export const tagsInputSlotRecipe = defineSlotRecipe({
         display: "none",
       },
     },
+    item: {
+      maxWidth: "100%",
+      minWidth: "0",
+    },
     itemText: {
       lineClamp: "1",
+      minWidth: "0",
     },
     itemInput: {
       outline: "none",
@@ -81,6 +86,7 @@ export const tagsInputSlotRecipe = defineSlotRecipe({
       gap: "1",
       rounded: "l1",
       px: "var(--tags-input-item-px)",
+      maxWidth: "100%",
     },
     itemDeleteTrigger: {
       display: "flex",
diff --git a/packages/react/__stories__/tags-input.stories.tsx b/packages/react/__stories__/tags-input.stories.tsx
index ff5c3a2a992..46ac320f2bf 100644
--- a/packages/react/__stories__/tags-input.stories.tsx
+++ b/packages/react/__stories__/tags-input.stories.tsx
@@ -32,3 +32,4 @@ export { TagsInputWithPaste as Paste } from "compositions/examples/tags-input-wi
 export { TagsInputWithSizes as Sizes } from "compositions/examples/tags-input-with-sizes"
 export { TagsInputWithStore as Store } from "compositions/examples/tags-input-with-store"
 export { TagsInputWithVariants as Variants } from "compositions/examples/tags-input-with-variants"
+export { TagsInputWithLongTags as LongTags } from "compositions/examples/tags-input-with-long-tags"
diff --git a/packages/react/src/theme/recipes/tags-input.ts b/packages/react/src/theme/recipes/tags-input.ts
index 00c965aa14a..20b0df00b07 100644
--- a/packages/react/src/theme/recipes/tags-input.ts
+++ b/packages/react/src/theme/recipes/tags-input.ts
@@ -57,8 +57,14 @@ export const tagsInputSlotRecipe = defineSlotRecipe({
       },
     },
 
+    item: {
+      maxWidth: "100%",
+      minWidth: "0",
+    },
+
     itemText: {
       lineClamp: "1",
+      minWidth: "0",
     },
 
     itemInput: {
@@ -78,6 +84,7 @@ export const tagsInputSlotRecipe = defineSlotRecipe({
       gap: "1",
       rounded: "l1",
       px: "var(--tags-input-item-px)",
+      maxWidth: "100%",
     },
 
     itemDeleteTrigger: {

From f3b13e76ba02c8fe2356231d741d41541e652df9 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Wed, 12 Nov 2025 14:31:36 +0000
Subject: [PATCH 2/2] chore: update recipe

---
 packages/react/src/theme/recipes/tags-input.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/theme/recipes/tags-input.ts b/packages/react/src/theme/recipes/tags-input.ts
index 20b0df00b07..b36b2cf1e6a 100644
--- a/packages/react/src/theme/recipes/tags-input.ts
+++ b/packages/react/src/theme/recipes/tags-input.ts
@@ -91,6 +91,7 @@ export const tagsInputSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      flexShrink: "0",
       boxSize: "calc(var(--tags-input-item-height) / 1.5)",
       cursor: { base: "button", _disabled: "initial" },
       me: "-1",