code · pull · Nov 12, 2025 · Nov 12, 2025 · Nov 12, 2025
diff --git a/.changeset/fix-tags-input-overflow.md 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
@@ -0,0 +1,25 @@
+import { Span, TagsInput } from "@chakra-ui/react"
+
+export const TagsInputWithLongTags = () => {
+  return (
+    <TagsInput.Root
+      maxW="md"
+      defaultValue={[
+        "[email protected]",
+        "anothersuperlongemailaddresswithoutanyspaceswhatsoever@verylongdomainname.com",
+        "[email protected]",
+        "[email protected]",
+        "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
@@ -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
@@ -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
@@ -57,8 +57,14 @@ export const tagsInputSlotRecipe = defineSlotRecipe({
       },
     },
 
+    item: {
+      maxWidth: "100%",
+      minWidth: "0",
+    },
+
     itemText: {
       lineClamp: "1",
+      minWidth: "0",
     },
 
     itemInput: {
@@ -78,12 +84,14 @@ export const tagsInputSlotRecipe = defineSlotRecipe({
       gap: "1",
       rounded: "l1",
       px: "var(--tags-input-item-px)",
+      maxWidth: "100%",
     },
 
     itemDeleteTrigger: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      flexShrink: "0",
       boxSize: "calc(var(--tags-input-item-height) / 1.5)",
       cursor: { base: "button", _disabled: "initial" },
       me: "-1",