From fd8f73160ca8a9e2ece2c1de97e31a8f8c2bc74f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 5 Dec 2025 09:31:01 -0500
Subject: [PATCH] fix custom tag example

---
 packages/webawesome/docs/docs/components/select.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md
index d19ce5354..2878fc00b 100644
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -285,8 +285,9 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
     const name = option.querySelector('wa-icon[slot="start"]').name;
 
     // You can return a string, a Lit Template, or an HTMLElement here
+    // Important: include data-value so the tag can be removed properly!
     return `
-      <wa-tag with-remove>
+      <wa-tag with-remove data-value="${option.value}">
         <wa-icon name="${name}"></wa-icon>
         ${option.label}
       </wa-tag>
@@ -299,6 +300,10 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
 Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities.
 :::
 
+:::info
+When using custom tags with `with-remove`, you must include the `data-value` attribute set to the option's value. This allows the select to identify which option to deselect when the tag's remove button is clicked.
+:::
+
 ### Lazy loading options
 
 Lazy loading options works similarly to native `<select>` elements. The select component handles various scenarios intelligently: