From 47bcb4255edd4179c20327317604240d446beed8 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 16 Oct 2026 08:22:39 -0500
Subject: [PATCH] use a unique id for each show incompatible models toggle

---
 .../config-form/theme/fields/ModelSourcePicker.tsx         | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx b/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx
index 7dce9d6d62..3fabf83138 100644
--- a/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx
+++ b/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useState } from "react";
+import { ReactNode, useId, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import useSWR from "swr";
 import axios from "axios";
@@ -81,6 +81,7 @@ export function ModelSourcePicker({
   });
 
   const [showIncompatible, setShowIncompatible] = useState(false);
+  const showIncompatibleId = useId();
 
   // the tab cannot be derived from the path alone: switching to Frigate+
   // leaves the path untouched until a model is picked
@@ -135,11 +136,11 @@ export function ModelSourcePicker({
           <Label>{t("frigatePlus.modelInfo.availableModels")}</Label>
           {hasIncompatible && (
             <div className="flex items-center gap-2">
-              <Label htmlFor="plus-show-incompatible" className="text-xs">
+              <Label htmlFor={showIncompatibleId} className="text-xs">
                 {t("frigatePlus.modelInfo.showIncompatible")}
               </Label>
               <Switch
-                id="plus-show-incompatible"
+                id={showIncompatibleId}
                 checked={showIncompatible}
                 onCheckedChange={setShowIncompatible}
               />