From 9073f261f47bc0e47430093157e53d7629cf4a75 Mon Sep 17 00:00:00 2001
From: Kristof Mattei <864376+kristof-mattei@users.noreply.github.com>
Date: Mon, 23 Mar 2026 09:50:08 -0700
Subject: [PATCH] chore: link label to select

---
 src/components/RechartsDevtools.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/RechartsDevtools.tsx b/src/components/RechartsDevtools.tsx
index f79735a..9f13d98 100644
--- a/src/components/RechartsDevtools.tsx
+++ b/src/components/RechartsDevtools.tsx
@@ -52,6 +52,7 @@ export const RechartsDevtools = () => {
   const portalId = contextId ?? RECHARTS_DEVTOOLS_PORTAL_ID;
   const { selectedInspectorId, setSelectedInspectorId, selectedInspector } = useSelectedInspector();
   const [container, setContainer] = React.useState<HTMLElement | null>(null);
+  const selectId = React.useId();
 
   React.useEffect(() => {
     const el = document.getElementById(portalId);
@@ -92,8 +93,9 @@ export const RechartsDevtools = () => {
               <div
                 style={{ display: 'flex', alignItems: 'center', marginBottom: '4px', gap: '8px' }}
               >
-                <label>Inspect Hook:</label>
+                <label htmlFor={selectId}>Inspect Hook:</label>
                 <select
+                  id={selectId}
                   value={selectedInspectorId}
                   onChange={(e) => setSelectedInspectorId(e.target.value as InspectorKey)}
                   style={{ padding: '4px' }}