diff --git a/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.tsx b/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.tsx
index 0f976baf8e..929e4ec8e6 100644
--- a/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.tsx
+++ b/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.tsx
@@ -83,11 +83,12 @@ export const CheckboxGroup = ({
     return !(typeof str === "string" && str.trim().length === 0)
   }
 
-  const uniqueId = () => "juno-checkboxgroup-" + useId()
+  const generatedName = useId()
+  const generatedId = useId()
 
   // Create unique identifiers for use with name and id of the group:
-  const groupName = name || uniqueId()
-  const groupId = id || uniqueId()
+  const groupName = name || "juno-checkboxgroup-" + generatedName
+  const groupId = id || "juno-checkboxgroup-" + generatedId
 
   // Init state variables:
   const [selectedOptions, setSelectedOptions] = useState<string[] | undefined>(selected)
diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx b/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx
index 5dacc809b2..ad117ef5b3 100644
--- a/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx
+++ b/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx
@@ -223,8 +223,9 @@ export const ComboBox = ({
     return !(typeof str === "string" && str.trim().length === 0)
   }
 
-  const theId = id || "juno-combobox-" + useId()
+  const generatedId = useId()
   const helptextId = "juno-combobox-helptext-" + useId()
+  const theId = id || "juno-combobox-" + generatedId
   const [isOpen, setIsOpen] = useState(false)
 
   const [optionValuesAndLabels, setOptionValuesAndLabels] = useState(
diff --git a/packages/ui-components/src/components/RadioGroup/RadioGroup.component.tsx b/packages/ui-components/src/components/RadioGroup/RadioGroup.component.tsx
index 6a4a45e634..dd1bb66dcf 100644
--- a/packages/ui-components/src/components/RadioGroup/RadioGroup.component.tsx
+++ b/packages/ui-components/src/components/RadioGroup/RadioGroup.component.tsx
@@ -99,11 +99,12 @@ export const RadioGroup = ({
     return !(typeof str === "string" && str.trim().length === 0)
   }
 
-  const uniqueId = () => "juno-radiogroup-" + useId()
+  const generatedName = useId()
+  const generatedId = useId()
 
   // Create unique identifiers for use with name and id of the group:
-  const groupName = name || uniqueId()
-  const groupId = id || uniqueId()
+  const groupName = name || "juno-radiogroup-" + generatedName
+  const groupId = id || "juno-radiogroup-" + generatedId
 
   const [selectedValue, setSelectedValue] = useState<string | undefined>(selected)
   const [isValid, setIsValid] = useState<boolean>(false)
diff --git a/packages/ui-components/src/components/SecretText/SecretText.component.tsx b/packages/ui-components/src/components/SecretText/SecretText.component.tsx
index 34b996d244..b5253de67b 100644
--- a/packages/ui-components/src/components/SecretText/SecretText.component.tsx
+++ b/packages/ui-components/src/components/SecretText/SecretText.component.tsx
@@ -116,8 +116,8 @@ export const SecretText = ({
     return !(typeof str === "string" && str.trim().length === 0)
   }
 
-  const uniqueId = () => "juno-secrettext-" + useId()
-  const theId = id || uniqueId()
+  const generatedId = useId()
+  const theId = id || "juno-secrettext-" + generatedId
 
   const [isRevealed, setIsRevealed] = useState(false)
   const [val, setVal] = useState("")
diff --git a/packages/ui-components/src/components/Select/Select.component.tsx b/packages/ui-components/src/components/Select/Select.component.tsx
index ac023e217e..0d4cbbba26 100644
--- a/packages/ui-components/src/components/Select/Select.component.tsx
+++ b/packages/ui-components/src/components/Select/Select.component.tsx
@@ -198,11 +198,11 @@ export const Select = ({
     return !(typeof value === "string" && value.trim().length === 0)
   }
 
-  const uniqueId = () => "juno-select-" + useId()
+  const generatedId = useId()
+  const helptextId = "juno-select-helptext-" + useId()
   const [isOpen, setIsOpen] = useState(false)
 
-  const theId = id || uniqueId()
-  const helptextId = "juno-select-helptext-" + useId()
+  const theId = id || "juno-select-" + generatedId
 
   const [optionValuesAndLabels, setOptionValuesAndLabels] = useState(new Map<unknown, unknown>())
   const [hasError, setHasError] = useState(false)
diff --git a/packages/ui-components/src/components/Switch/Switch.component.tsx b/packages/ui-components/src/components/Switch/Switch.component.tsx
index b958feffdf..74bf2b5c18 100644
--- a/packages/ui-components/src/components/Switch/Switch.component.tsx
+++ b/packages/ui-components/src/components/Switch/Switch.component.tsx
@@ -230,7 +230,7 @@ export const Switch = ({
   wrapperClassName = "",
   ...props
 }: SwitchProps): ReactNode => {
-  const generateUniqueId = (): string => "juno-switch-" + useId()
+  const generatedId = useId()
 
   const [isOn, setIsOn] = useState<boolean>(on)
   const [isInvalid, setIsInvalid] = useState<boolean>(false)
@@ -264,7 +264,7 @@ export const Switch = ({
     if (onChange) onChange(event as unknown as ChangeEvent<HTMLButtonElement>)
   }
 
-  const generatedId: string = id || generateUniqueId()
+  const theId: string = id || "juno-switch-" + generatedId
 
   return (
     <div>
@@ -279,7 +279,7 @@ export const Switch = ({
           type="button"
           role="switch"
           name={name}
-          id={generatedId}
+          id={theId}
           aria-checked={isOn}
           disabled={disabled}
           onClick={handleSwitchClick}
@@ -301,7 +301,7 @@ export const Switch = ({
           ></span>
         </button>
 
-        <Label text={label} htmlFor={generatedId} className="jn:ml-2" disabled={disabled} required={required} />
+        <Label text={label} htmlFor={theId} className="jn:ml-2" disabled={disabled} required={required} />
 
         {renderValidationIcon(isInvalid, isValid, disabled)}
       </span>
diff --git a/packages/ui-components/src/components/TextInput/TextInput.component.tsx b/packages/ui-components/src/components/TextInput/TextInput.component.tsx
index 46312d1d56..1aeb2e31b2 100644
--- a/packages/ui-components/src/components/TextInput/TextInput.component.tsx
+++ b/packages/ui-components/src/components/TextInput/TextInput.component.tsx
@@ -122,7 +122,7 @@ export const TextInput = ({
     return !(typeof str === "string" && str.trim().length === 0)
   }
 
-  const uniqueId = () => "juno-textinput-" + useId()
+  const generatedId = useId()
 
   const ref = useRef<HTMLInputElement | null>(null)
   const [val, setValue] = useState<string | number>("")
@@ -188,7 +188,7 @@ export const TextInput = ({
     }
   }
 
-  const theId = id || uniqueId()
+  const theId = id || "juno-textinput-" + generatedId
 
   return (
     <div className="juno-textinput-outer-wrapper">
diff --git a/packages/ui-components/src/components/Textarea/Textarea.component.tsx b/packages/ui-components/src/components/Textarea/Textarea.component.tsx
index d602f5970d..3a9eb844da 100644
--- a/packages/ui-components/src/components/Textarea/Textarea.component.tsx
+++ b/packages/ui-components/src/components/Textarea/Textarea.component.tsx
@@ -123,7 +123,7 @@ export const Textarea = ({
     return !(typeof str === "string" && str.trim().length === 0)
   }
 
-  const uniqueId = () => "juno-textarea-" + useId()
+  const generatedId = useId()
 
   const ref = useRef<HTMLTextAreaElement>(null)
   const [val, setValue] = useState<string>("")
@@ -189,7 +189,7 @@ export const Textarea = ({
     }
   }
 
-  const theId = id || uniqueId()
+  const theId = id || "juno-textarea-" + generatedId
 
   return (
     <div>