diff --git a/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.html b/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.html
index db10002a1160ff06cfba691d9cbdeb60da821440..0a0c46e7d44f4f3a64c11e4f466287006411e2f8 100644
--- a/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.html
+++ b/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.html
@@ -2,9 +2,11 @@
   <mat-form-field>
     <mat-label>{{'stateVariableId' | translate}}</mat-label>
     <input matInput
+           #idInput
+           [class.error]="error"
            [placeholder]="'stateVariableId' | translate"
-           [(ngModel)]="stateVariable.id"
-           (ngModelChange)="stateVariableChange.emit(stateVariable)">
+           [ngModel]="stateVariable.id"
+           (input)="checkId(idInput.value)">
   </mat-form-field>
 
   <mat-form-field>
diff --git a/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.ts b/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.ts
index ba5fad90a56abf9492b4f3b46ba2f3ad16c94348..572fb823f3a1254c95a6171f97d82536173702d9 100644
--- a/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.ts
+++ b/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.ts
@@ -2,12 +2,33 @@ import {
   Component, EventEmitter, Input, Output
 } from '@angular/core';
 import { StateVariable } from 'common/models/state-variable';
+import { IDService } from 'editor/src/app/services/id.service';
 
 @Component({
   selector: 'aspect-state-variable-editor',
-  templateUrl: './state-variable-editor.component.html'
+  templateUrl: './state-variable-editor.component.html',
+  styles: [`
+    .error {
+      color: #f44336 !important;
+    }
+  `]
 })
 export class StateVariableEditorComponent {
+  error: boolean = false;
   @Input() stateVariable!: StateVariable;
   @Output() stateVariableChange = new EventEmitter<StateVariable>();
+
+  constructor(private idService: IDService) { }
+
+  checkId(id: string): void {
+    if (id !== this.stateVariable.id) {
+      this.error = !this.idService.validateAndAddNewID(id, this.stateVariable.id);
+      if (!this.error) {
+        this.stateVariable.id = id;
+        this.stateVariableChange.emit(this.stateVariable);
+      }
+    } else {
+      this.error = false;
+    }
+  }
 }
diff --git a/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.ts b/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.ts
index 4d67343ca88d204b04f4666e8b2b8458354cbe86..64dc5d3605d07afe41f2445c95911bbf535eccc3 100644
--- a/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { StateVariable } from 'common/models/state-variable';
+import { IDService } from 'editor/src/app/services/id.service';
 
 @Component({
   templateUrl: './state-variables-dialog.component.html',
@@ -20,12 +21,15 @@ import { StateVariable } from 'common/models/state-variable';
 export class StateVariablesDialogComponent {
   stateVariables: StateVariable[];
 
-  constructor(@Inject(MAT_DIALOG_DATA) private data: { stateVariables: StateVariable[] }) {
+  constructor(
+    private idService: IDService,
+    @Inject(MAT_DIALOG_DATA) private data: { stateVariables: StateVariable[] }) {
     this.stateVariables = [...data.stateVariables];
   }
 
   addStateVariable() {
-    this.stateVariables.push({ id: 'NewState', value: '' });
+    const id = this.idService.getAndRegisterNewID('state-variable');
+    this.stateVariables.push({ id, value: '' });
   }
 
   deleteStateVariable(index: number) {
diff --git a/projects/editor/src/app/services/id.service.ts b/projects/editor/src/app/services/id.service.ts
index 53753525dfee1e16304b69ac0f5885e85ffde7b1..a22c97f6460c8020ec7e7de7c3df9a0e601a50ae 100644
--- a/projects/editor/src/app/services/id.service.ts
+++ b/projects/editor/src/app/services/id.service.ts
@@ -2,11 +2,14 @@ import { Injectable } from '@angular/core';
 import { Unit } from 'common/models/unit';
 import { UIElement } from 'common/models/elements/element';
 import { DropListElement } from 'common/models/elements/input-elements/drop-list';
+import { MessageService } from 'common/services/message.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class IDService {
+  maxIDLength = 20;
   givenIDs: string[] = [];
   private idCounter: Record<string, number> = {
     text: 0,
@@ -33,9 +36,27 @@ export class IDService {
     'toggle-button': 0,
     geometry: 0,
     'math-field': 0,
-    value: 0
+    value: 0,
+    'state-variable': 0
   };
 
+  constructor(private messageService: MessageService, private translateService: TranslateService) { }
+
+  validateAndAddNewID(newId: string, oldId: string): boolean {
+    if (!this.isIdAvailable(newId)) { // prohibit existing IDs
+      this.messageService.showError(this.translateService.instant('idTaken'));
+    } else if (newId.length > this.maxIDLength) {
+      this.messageService.showError('ID länger als 20 Zeichen');
+    } else if (newId.includes(' ')) {
+      this.messageService.showError('ID enthält unerlaubtes Leerzeichen');
+    } else {
+      this.removeId(oldId);
+      this.addID(newId as string);
+      return true;
+    }
+    return false;
+  }
+
   getNewID(type: string): string {
     if (!type) {
       throw Error('ID-Service: No type given!');
diff --git a/projects/editor/src/app/services/unit.service.ts b/projects/editor/src/app/services/unit.service.ts
index ef7519cb28c386e4467f1278b5c3cec5d8e21a2d..5263e99da62fc700b3273365249115ca5a5cf563 100644
--- a/projects/editor/src/app/services/unit.service.ts
+++ b/projects/editor/src/app/services/unit.service.ts
@@ -301,15 +301,7 @@ export class UnitService {
     console.log('updateElementProperty', elements, property, value);
     elements.forEach(element => {
       if (property === 'id') {
-        if (!this.idService.isIdAvailable((value as string))) { // prohibit existing IDs
-          this.messageService.showError(this.translateService.instant('idTaken'));
-        } else if ((value as string).length > 20) {
-          this.messageService.showError('ID länger als 20 Zeichen');
-        } else if ((value as string).includes(' ')) {
-          this.messageService.showError('ID enthält unerlaubtes Leerzeichen');
-        } else {
-          this.idService.removeId(element.id);
-          this.idService.addID(value as string);
+        if (this.idService.validateAndAddNewID(value as string, element.id)) {
           element.setProperty('id', value);
         }
       } else if (element.type === 'text' && property === 'text') {