diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index 54c4822af6..bbcdab6ba6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -82,9 +82,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!powerButtonWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="powerButtonWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts
index 3d3ee57f0e..e7e91f3fa9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { isUndefined } from '@core/utils';
 import { ValueType } from '@shared/models/constants';
@@ -53,6 +53,8 @@ export class PowerButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
   powerButtonWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
index abb1621966..daa56f4212 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
@@ -120,9 +120,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          [predefinedValuesButton]="true"
+                                          [predefinedValues]="predefinedValues"
+                                          [disabled]="!segmentedButtonWidgetConfigForm.get('leftAppearance').get('showLabel').value"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetConfigForm.get('appearance.leftAppearance.label').value">
           </tb-font-settings>
@@ -151,9 +158,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          [predefinedValuesButton]="true"
+                                          [predefinedValues]="predefinedValues"
+                                          [disabled]="!segmentedButtonWidgetConfigForm.get('rightAppearance').get('showLabel').value"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetConfigForm.get('appearance.rightAppearance.label').value">
           </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts
index f9f1581203..fc654304ca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { Datasource, TargetDevice, } from '@shared/models/widget.models';
+import { Datasource, TargetDevice, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { ValueType } from '@shared/models/constants';
 import { getTargetDeviceFromDatasources } from '@shared/models/widget-settings.models';
@@ -48,7 +48,7 @@ export class SegmentedButtonBasicConfigComponent extends BasicWidgetConfigCompon
     const datasources: Datasource[] = this.segmentedButtonWidgetConfigForm.get('datasources').value;
     return getTargetDeviceFromDatasources(datasources);
   }
-
+  predefinedValues = widgetTitleAutocompleteValues;
   segmentedButtonAppearanceType: SegmentedButtonAppearanceType = 'first';
   segmentedButtonColorStylesType: SegmentedButtonColorStylesType = 'selected';
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
index 6e244e27b2..327f9f72e0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
@@ -92,9 +92,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!toggleButtonWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="toggleButtonWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts
index 72fdc272f1..06ba4234f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, TargetDeviceType, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, TargetDeviceType, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { isUndefined } from '@core/utils';
 import { ValueType } from '@shared/models/constants';
@@ -49,6 +49,8 @@ export class ToggleButtonBasicConfigComponent extends BasicWidgetConfigComponent
 
   toggleButtonWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
index 738dad0210..0b3fcb4cf2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
@@ -39,9 +39,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!aggregatedValueCardWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="aggregatedValueCardWidgetConfigForm.get('title').value"
@@ -78,9 +85,16 @@
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        [predefinedValuesButton]="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!aggregatedValueCardWidgetConfigForm.get('showSubtitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="subtitle"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="subtitleFont"
                           clearButton
                           [previewText]="aggregatedValueCardWidgetConfigForm.get('subtitle').value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
index b2b47ea4dd..a35ef957a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { ComparisonResultType, DataKey, Datasource, WidgetConfig, } from '@shared/models/widget.models';
+import { ComparisonResultType, DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -80,6 +80,8 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private cd: ChangeDetectorRef,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
index f205a2b00c..96d3357b9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
@@ -41,9 +41,16 @@
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!labelValueCardWidgetConfigForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="labelValueCardWidgetConfigForm.get('label').value">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts
index 370660895c..4478007fb5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts
@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { formatValue, isUndefined } from '@core/utils';
@@ -60,6 +61,8 @@ export class LabelValueCardBasicConfigComponent extends BasicWidgetConfigCompone
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
index a0973be506..c7100c8d49 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@@ -52,9 +52,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        [disabled]="!progressBarWidgetConfigForm.get('showTitle').value"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="progressBarWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
index 49e17c6bd0..53c59606f2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -72,6 +73,8 @@ export class ProgressBarBasicConfigComponent extends BasicWidgetConfigComponent
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
index f2946d6d23..2f89c6d01c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
@@ -32,9 +32,15 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.simple-card.label</div>
-      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1" 
+                                      appearance="outline"
+                                      brackets="curly" 
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+        ></tb-string-pattern-autocomplete>
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.simple-card.label-position</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.ts
index 83fcd06ebf..fb2e41f3c4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.ts
@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -54,6 +55,8 @@ export class SimpleCardBasicConfigComponent extends BasicWidgetConfigComponent {
 
   simpleCardWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
index 79828d9bb9..8a2bfd1a55 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
@@ -44,9 +44,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!timeseriesTableWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="timeseriesTableWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts
index 063b7d6436..f02e6b05f0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey, Datasource, WidgetConfig } from '@shared/models/widget.models';
+import { DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { deepClone, isUndefined } from '@core/utils';
@@ -47,6 +47,8 @@ export class TimeseriesTableBasicConfigComponent extends BasicWidgetConfigCompon
 
   timeseriesTableWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 0cd6504abb..d9d2f4f13b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -53,9 +53,16 @@
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!valueCardWidgetConfigForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+          ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="valueCardWidgetConfigForm.get('label').value">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
index 09b60fa123..6507444df3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -84,6 +85,8 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
     return layout !== ValueCardLayout.simplified;
   }
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private cd: ChangeDetectorRef,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
index dc2dbdf655..0d9ea8dc16 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
@@ -51,9 +51,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!valueChartCardWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="valueChartCardWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
index 5113b04a13..9d1af1842c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey, Datasource, WidgetConfig, } from '@shared/models/widget.models';
+import { DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -63,6 +63,8 @@ export class ValueChartCardBasicConfigComponent extends BasicWidgetConfigCompone
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts
index ba9c41893e..b7d6b4f640 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts
@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class BarChartBasicConfigComponent extends LatestChartBasicConfigComponen
   @ViewChild('barChart')
   barChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index 307645822d..d468585ed2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -49,9 +49,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!barChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="barChartWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
index 9f9550062e..4305a8f62d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
@@ -26,6 +26,7 @@ import {
   legendPositions,
   legendPositionTranslationMap,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -73,6 +74,8 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
 
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
index 067fae3b4e..b02bf885ae 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -41,6 +41,8 @@ export class DoughnutBasicConfigComponent extends LatestChartBasicConfigComponen
   @ViewChild('doughnutChart')
   doughnutChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
index abe1401c73..f22052f28e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
@@ -44,9 +44,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!flotWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="flotWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.ts
index b87d2dc365..26b676ff53 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey, Datasource, WidgetConfig } from '@shared/models/widget.models';
+import { DataKey, Datasource, WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { isUndefined } from '@core/utils';
@@ -47,6 +47,8 @@ export class FlotBasicConfigComponent extends BasicWidgetConfigComponent {
 
   flotWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
index 31d0e6cd7e..c563820054 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
@@ -50,9 +50,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!latestChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="latestChartWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/pie-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/pie-chart-basic-config.component.ts
index e4ff9886b9..80d57c2518 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/pie-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/pie-chart-basic-config.component.ts
@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class PieChartBasicConfigComponent extends LatestChartBasicConfigComponen
   @ViewChild('pieChart')
   pieChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/polar-area-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/polar-area-chart-basic-config.component.ts
index e0dc692e3d..8c68ec2ff5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/polar-area-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/polar-area-chart-basic-config.component.ts
@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class PolarAreaChartBasicConfigComponent extends LatestChartBasicConfigCo
   @ViewChild('polarAreaChart')
   polarAreaChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts
index 98b6cf8fbf..13d1f018b3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts
@@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKey } from '@shared/models/widget.models';
+import { DataKey, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
@@ -40,6 +40,8 @@ export class RadarChartBasicConfigComponent extends LatestChartBasicConfigCompon
   @ViewChild('radarChart')
   radarChartConfigTemplate: TemplateRef<any>;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               protected fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index 608284996e..66939ce4f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -33,9 +33,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!rangeChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="rangeChartWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
index 1a2e938612..8cc36f81cd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
@@ -26,6 +26,7 @@ import {
   legendPositions,
   legendPositionTranslationMap,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -102,6 +103,8 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
 
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
index 0c5eb426b3..b358ab5087 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
@@ -123,9 +123,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!timeSeriesChartWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="timeSeriesChartWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
index 60135a3438..b399d75b1a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
@@ -27,6 +27,7 @@ import {
   legendPositions,
   legendPositionTranslationMap,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -93,6 +94,8 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
   seriesMode = 'series';
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
index 1c091067fa..58521dbb0e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
@@ -44,9 +44,16 @@
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!entitiesTableWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+          ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="entitiesTableWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.ts
index b247ac9287..59e871ab24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.ts
@@ -24,7 +24,8 @@ import {
   DataKey,
   Datasource,
   datasourcesHasAggregation,
-  datasourcesHasOnlyComparisonAggregation, WidgetConfig
+  datasourcesHasOnlyComparisonAggregation, WidgetConfig,
+  widgetTitleAutocompleteValues
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -62,6 +63,8 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
 
   entitiesTableWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.html
index 906c4dbf6c..9ebf357105 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.html
@@ -26,7 +26,7 @@
   </tb-datasources>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
-    <tb-count-widget-settings alarmElseEntity="false" formControlName="settings"></tb-count-widget-settings>
+    <tb-count-widget-settings alarmElseEntity="false" formControlName="settings" [predefinedValues]="predefinedValues"></tb-count-widget-settings>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.ts
index 797232fe56..17bcb3be67 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entity-count-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DatasourceType, WidgetConfig, } from '@shared/models/widget.models';
+import { DatasourceType, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { isUndefined } from '@core/utils';
@@ -36,6 +36,8 @@ export class EntityCountBasicConfigComponent extends BasicWidgetConfigComponent
 
   entityCountWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private utils: UtilsService,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index 59b3261872..4a8d6a7b27 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -53,9 +53,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!batteryLevelWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="batteryLevelWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
index c3a1e2fa32..e386da4250 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
@@ -26,6 +26,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -85,6 +86,8 @@ export class BatteryLevelBasicConfigComponent extends BasicWidgetConfigComponent
     }
   }
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index c270b17551..87cac17a5f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -35,9 +35,16 @@
         {{ 'widgets.liquid-level-card.title' | translate }}
       </mat-slide-toggle>
       <div class="tb-flex row flex-start align-center">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!levelCardWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           [previewText]="levelCardWidgetConfigForm.get('title').value">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
index 6cd016a85d..203d440895 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
@@ -27,6 +27,7 @@ import {
   datasourcesHasOnlyComparisonAggregation,
   DatasourceType,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -126,6 +127,8 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   private keySearchText: string;
   private latestKeySearchTextResult: Array<string>;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index 04ae0edf63..70d14d0628 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -47,9 +47,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!signalStrengthWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="signalStrengthWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
index 4bf37216a4..80785315ff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
@@ -25,6 +25,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -76,6 +77,8 @@ export class SignalStrengthBasicConfigComponent extends BasicWidgetConfigCompone
   tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this);
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html
index dcefd50801..d6634949e2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.html
@@ -33,9 +33,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!mapWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="mapWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.ts
index 9ce53ded4f..e0ad802ed5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/map/map-basic-config.component.ts
@@ -24,7 +24,7 @@ import { WidgetConfigComponentData } from '@home/models/widget-component.models'
 import { isDefinedAndNotNull, isUndefined, mergeDeep, mergeDeepIgnoreArray } from '@core/utils';
 import { mapWidgetDefaultSettings, MapWidgetSettings } from '@home/components/widget/lib/maps/map-widget.models';
 import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models';
-import { WidgetConfig } from '@shared/models/widget.models';
+import { WidgetConfig, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import {
   getTimewindowConfig,
   setTimewindowConfig
@@ -41,6 +41,8 @@ export class MapBasicConfigComponent extends BasicWidgetConfigComponent {
 
   trip = false;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
index d207d15320..58f5a0dfbb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { isUndefined } from '@core/utils';
 import {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index cbbc1c6238..6d83096353 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -76,9 +76,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!sliderWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="sliderWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
index 564a9fe238..08894ca850 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { formatValue, isUndefined } from '@core/utils';
 import { ValueType } from '@shared/models/constants';
@@ -59,6 +59,8 @@ export class SliderBasicConfigComponent extends BasicWidgetConfigComponent {
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
index 4b5cb39d81..e38a6be486 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
@@ -35,9 +35,16 @@
           {{ 'widget-config.title' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          predefinedValuesButton="true"
+                                          [disabled]="!scadaSymbolWidgetConfigForm.get('showTitle').value"
+                                          [predefinedValues]="predefinedValues"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="title"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="titleFont"
                             clearButton
                             [previewText]="scadaSymbolWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts
index d7037c37a1..fc58bb354a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts
@@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models';
+import { TargetDevice, WidgetConfig, widgetTitleAutocompleteValues, } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import {
   scadaSymbolWidgetDefaultSettings,
@@ -42,6 +42,8 @@ export class ScadaSymbolBasicConfigComponent extends BasicWidgetConfigComponent
 
   scadaSymbolWidgetConfigForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index bc28242552..d8f257b780 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -95,9 +95,16 @@
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [disabled]="!windSpeedDirectionWidgetConfigForm.get('showTitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="title"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="titleFont"
                           clearButton
                           [previewText]="windSpeedDirectionWidgetConfigForm.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
index 807cc659f9..6d82a33b9f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
@@ -26,6 +26,7 @@ import {
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
+  widgetTitleAutocompleteValues,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -90,6 +91,8 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
     return layout === WindSpeedDirectionLayout.advanced;
   }
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html
index f3f6a025da..86ea878098 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-card-widget.component.html
@@ -24,7 +24,7 @@
   <div #labelCardContent class="tb-label-card-content">
     <div #labelCardRow class="tb-label-card-row">
       <tb-icon *ngIf="showIcon" [style]="iconStyle">{{ icon }}</tb-icon>
-      <div [class.tb-label-card-label]="!settings.autoScale" [style]="labelStyle" [innerHTML]="label | safe:'html'"></div>
+      <div [class.tb-label-card-label]="!settings.autoScale" [style]="labelStyle" [innerHTML]="label | customTranslate  | safe:'html'"></div>
     </div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
index f88be8783b..6201063403 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
@@ -143,7 +143,6 @@ export class TbCanvasDigitalGauge {
       ticks: this.localSettings.ticks,
 
       title: this.localSettings.title,
-
       fontTitleSize: this.localSettings.titleFont.size,
       fontTitleStyle: this.localSettings.titleFont.style,
       fontTitleWeight: this.localSettings.titleFont.weight,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
index 2c111110c9..68bbff277d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
@@ -951,7 +951,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
     this.updateTripsAnchors();
     this.updateBounds();
     this.updateEditButtonsStates();
-
+    this.ctx.updateLabelPatterns();
   }
 
   private updateTrips(subscription: IWidgetSubscription) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
index 562c195ba4..4af93b3316 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
@@ -112,9 +112,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          predefinedValuesButton="true"
+                                          [disabled]="!segmentedButtonWidgetSettingsForm.get('leftAppearance').get('showLabel').value"
+                                          [predefinedValues]="predefinedValues"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetSettingsForm.get('appearance.leftAppearance.label').value">
           </tb-font-settings>
@@ -143,9 +150,16 @@
           {{ 'widgets.button.label' | translate }}
         </mat-slide-toggle>
         <div class="flex flex-1 flex-row items-center justify-start gap-2">
-          <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-            <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-          </mat-form-field>
+          <tb-string-pattern-autocomplete class="flex-1"
+                                          appearance="outline"
+                                          brackets="curly"
+                                          subscriptSizing="dynamic"
+                                          predefinedValuesButton="true"
+                                          [disabled]="!segmentedButtonWidgetSettingsForm.get('rightAppearance').get('showLabel').value"
+                                          [predefinedValues]="predefinedValues"
+                                          placeholderText="{{ 'widget-config.set' | translate }}"
+                                          formControlName="label"
+          ></tb-string-pattern-autocomplete>
           <tb-font-settings formControlName="labelFont"
                             [previewText]="segmentedButtonWidgetSettingsForm.get('appearance.rightAppearance.label').value">
           </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts
index 7696e5d8f3..960c72ccf3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts
@@ -15,7 +15,13 @@
 ///
 
 import { Component } from '@angular/core';
-import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models';
+import {
+  TargetDevice,
+  WidgetSettings,
+  WidgetSettingsComponent,
+  widgetTitleAutocompleteValues,
+  widgetType
+} from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -67,6 +73,8 @@ export class SegmentedButtonWidgetSettingsComponent extends WidgetSettingsCompon
 
   segmentedButtonWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
index 7c2306c55c..490b180d96 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
@@ -28,9 +28,16 @@
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        [predefinedValuesButton]="true"
+                                        [disabled]="!aggregatedValueCardWidgetSettingsForm.get('showSubtitle').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="subtitle"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="subtitleFont"
                           clearButton
                           [previewText]="aggregatedValueCardWidgetSettingsForm.get('subtitle').value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
index b143697384..42c233f88b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component, Injector } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import {WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues} from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -33,6 +33,8 @@ export class AggregatedValueCardWidgetSettingsComponent extends WidgetSettingsCo
 
   datePreviewFn = this._datePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private $injector: Injector,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
index 62806c2e17..098ba49ab4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
@@ -28,9 +28,16 @@
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex-1"
+                                        appearance="outline"
+                                        brackets="curly"
+                                        subscriptSizing="dynamic"
+                                        [predefinedValuesButton]="true"
+                                        [disabled]="!labelValueCardWidgetSettingsForm.get('showLabel').value"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="label"
+        ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="labelValueCardWidgetSettingsForm.get('label').value">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts
index 67f5b58935..4d735165dc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import {WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues} from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -34,6 +34,8 @@ export class LabelValueCardWidgetSettingsComponent extends WidgetSettingsCompone
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
index dd2c43cee4..6ac5ccf16b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
@@ -37,9 +37,16 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.button.label' | translate }}
     </mat-slide-toggle>
-    <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-      <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="flex-1"
+                                    appearance="outline"
+                                    brackets="curly"
+                                    subscriptSizing="dynamic"
+                                    predefinedValuesButton="true"
+                                    [disabled]="!appearanceFormGroup.get('showLabel').value"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="label"
+    ></tb-string-pattern-autocomplete>
   </div>
   <div class="tb-form-row">
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.ts
index b05409fa88..e8662ce947 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.ts
@@ -26,6 +26,7 @@ import {
 import { merge } from 'rxjs';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 
 @Component({
   selector: 'tb-widget-button-appearance',
@@ -71,6 +72,8 @@ export class WidgetButtonAppearanceComponent implements OnInit, ControlValueAcce
 
   appearanceFormGroup: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   private propagateChange = (_val: any) => {};
 
   constructor(private fb: UntypedFormBuilder,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
index c539fe96db..c742235070 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
@@ -38,9 +38,22 @@
       {{ 'widgets.count.label' | translate }}
     </mat-slide-toggle>
     <div class="flex flex-1 flex-row items-center justify-start gap-2">
-      <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      @if (!predefinedValues) {
+        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      }@else {
+        <tb-string-pattern-autocomplete class="flex-1"
+                                      appearance="outline"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [disabled]="!countWidgetConfigForm.get('showLabel').value"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+        ></tb-string-pattern-autocomplete>
+      }
       <tb-font-settings formControlName="labelFont"
                         [previewText]="countWidgetConfigForm.get('label').value">
       </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.ts
index b44d422a35..4b8f3614e0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.ts
@@ -61,6 +61,9 @@ export class CountWidgetSettingsComponent extends PageComponent implements OnIni
   @Input()
   alarmElseEntity: boolean;
 
+  @Input()
+  predefinedValues: string[];
+  
   private propagateChange = null;
 
   countCardLayouts = countCardLayouts;
@@ -69,7 +72,6 @@ export class CountWidgetSettingsComponent extends PageComponent implements OnIni
   countCardLayoutImageMap: Map<CountCardLayout, string>;
 
   countWidgetConfigForm: UntypedFormGroup;
-
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder,
               private destroyRef: DestroyRef) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
index dfd6b2f537..a69c6aca52 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
@@ -21,9 +21,16 @@
       {{ 'widgets.status-widget.label' | translate }}
     </mat-slide-toggle>
     <div class="flex flex-1 flex-row items-center justify-start gap-2">
-      <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1"
+                                      appearance="outline"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [disabled]="!stateSettingsFormGroup.get('showLabel').value"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+      ></tb-string-pattern-autocomplete>
       <tb-font-settings formControlName="labelFont"
                         [previewText]="stateSettingsFormGroup.get('label').value">
       </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.ts
index 61615f5d4b..9e6a42161b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.ts
@@ -22,6 +22,7 @@ import {
   StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { widgetTitleAutocompleteValues } from '@app/shared/public-api';
 
 @Component({
   selector: 'tb-status-widget-state-settings',
@@ -51,6 +52,8 @@ export class StatusWidgetStateSettingsComponent implements OnInit, OnChanges, Co
 
   public stateSettingsFormGroup: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(private fb: UntypedFormBuilder,
               private destroyRef: DestroyRef) {
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
index 3923756330..ccadb014b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.rpc.widget-title</mat-label>
-      <input matInput formControlName="title">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                    brackets="curly"
+                                    predefinedValuesButton="true"
+                                    label="{{'widgets.rpc.common-settings' | translate }}"
+                                    [disabled]="!sendRpcWidgetSettingsForm.get('showLabel').value"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widgets.rpc.widget-title' | translate }}"
+                                    formControlName="title"
+    ></tb-string-pattern-autocomplete>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts
index c4382d9da3..6226a476e9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -32,6 +32,8 @@ export class SendRpcWidgetSettingsComponent extends WidgetSettingsComponent {
 
   contentTypes = ContentType;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index 5069cffddb..0077b12d50 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -86,9 +86,16 @@
         {{ 'widgets.single-switch.label' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
-          <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
-        </mat-form-field>
+        <tb-string-pattern-autocomplete class="flex flex-1"
+                                      appearance="outline"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      [disabled]="!singleSwitchWidgetSettingsForm.get('showLabel').value"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="label"
+       ></tb-string-pattern-autocomplete>
         <tb-font-settings formControlName="labelFont"
                           [previewText]="singleSwitchWidgetSettingsForm.get('label').value">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
index 4bd5140e25..255cffc0af 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models';
+import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues, widgetType } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -51,6 +51,8 @@ export class SingleSwitchWidgetSettingsComponent extends WidgetSettingsComponent
 
   singleSwitchWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
index 2ecc9cd677..5406c063a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
@@ -18,10 +18,14 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="slideToggleWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
-      <input matInput formControlName="title">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                    brackets="curly" 
+                                    predefinedValuesButton="true"
+                                    label="{{'widgets.rpc.slide-toggle-label' | translate }}"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="title"
+    ></tb-string-pattern-autocomplete>
     <section class="flex flex-row xs:flex-col gt-xs:gap-2">
       <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.label-position</mat-label>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.ts
index c5b55113c6..cba99e796c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { TargetDevice, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -31,6 +31,8 @@ export class SlideToggleWidgetSettingsComponent extends WidgetSettingsComponent
 
   slideToggleWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
index bdcb0f3892..32b14cda47 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
@@ -18,10 +18,14 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="updateDeviceAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.rpc.widget-title</mat-label>
-      <input matInput formControlName="title">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                    brackets="curly" 
+                                    predefinedValuesButton="true"
+                                    label="{{'widgets.rpc.widget-title' | translate }}"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="title"
+    ></tb-string-pattern-autocomplete>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.ts
index 2cb2086ee0..fca5236103 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -32,6 +32,8 @@ export class UpdateDeviceAttributeWidgetSettingsComponent extends WidgetSettings
 
   contentTypes = ContentType;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
index d369c4a165..4e59cd4f03 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
@@ -20,9 +20,15 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.entities-table-title' | translate }}</div>
-      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="entitiesTitle" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1" 
+                                        appearance="outline"
+                                        brackets="curly" 
+                                        subscriptSizing="dynamic"
+                                        predefinedValuesButton="true"
+                                        [predefinedValues]="predefinedValues"
+                                        placeholderText="{{ 'widget-config.set' | translate }}"
+                                        formControlName="entitiesTitle"
+      ></tb-string-pattern-autocomplete>
     </div>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide"  formControlName="enableStickyHeader">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts
index e7f20de9f1..f482712eb8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -31,6 +31,8 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
   entitiesTableWidgetSettingsForm: UntypedFormGroup;
   pageStepSizeValues = [];
 
+  predefinedValues = widgetTitleAutocompleteValues;
+  
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.html
index 512f13fbc6..27ff9e45b4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.html
@@ -18,6 +18,6 @@
 <ng-container [formGroup]="entityCountWidgetSettingsForm">
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.entity-count.entity-count-card-style</div>
-    <tb-count-widget-settings alarmElseEntity="false" formControlName="entityCountSettings"></tb-count-widget-settings>
+    <tb-count-widget-settings alarmElseEntity="false" [predefinedValues]="predefinedValues" formControlName="entityCountSettings"></tb-count-widget-settings>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.ts
index 2db8e3b0af..ab4a7901f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entity-count-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -29,6 +29,8 @@ import { countDefaultSettings } from '@home/components/widget/lib/count/count-wi
 export class EntityCountWidgetSettingsComponent extends WidgetSettingsComponent {
 
   entityCountWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
index 58c3c7a01b..234bc7ffbd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
@@ -16,10 +16,15 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigSingleDeviceWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
-    <mat-label translate>widgets.gateway.gateway-title</mat-label>
-    <input matInput formControlName="gatewayTitle">
-  </mat-form-field>
+  <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                  brackets="curly" 
+                                  subscriptSizing="fixed"
+                                  predefinedValuesButton="true"
+                                  label="{{ 'widgets.gateway.gateway-title' | translate }}"
+                                  [predefinedValues]="predefinedValues"
+                                  placeholderText="{{ 'widget-config.set' | translate }}"
+                                  formControlName="gatewayTitle"
+  ></tb-string-pattern-autocomplete>
   <mat-slide-toggle formControlName="readOnly" class="slide-block">
     {{ 'widgets.gateway.read-only' | translate }}
   </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.ts
index a1fadd5bd1..b8cf3485c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class GatewayConfigSingleDeviceWidgetSettingsComponent extends WidgetSettingsComponent {
 
   gatewayConfigSingleDeviceWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
index 3009c09cdc..6aa636d7a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.gateway.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                    brackets="curly" 
+                                    subscriptSizing="fixed"
+                                    predefinedValuesButton="true"
+                                    label="{{ 'widgets.gateway.widget-title' | translate }}"
+                                    [predefinedValues]="predefinedValues"
+                                    placeholderText="{{ 'widget-config.set' | translate }}"
+                                    formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.default-archive-file-name</mat-label>
       <input matInput formControlName="archiveFileName">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.ts
index 2b2a59ba2b..90ece2b768 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class GatewayConfigWidgetSettingsComponent extends WidgetSettingsComponent {
 
   gatewayConfigWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
index 8566216692..ce401197c9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
@@ -16,10 +16,15 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayEventsWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
-    <mat-label translate>widgets.gateway.events-title</mat-label>
-    <input matInput formControlName="eventsTitle">
-  </mat-form-field>
+  <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                  brackets="curly" 
+                                  subscriptSizing="fixed"
+                                  predefinedValuesButton="true"
+                                  label="{{ 'widgets.gateway.events-title' | translate }}"
+                                  [predefinedValues]="predefinedValues"
+                                  placeholderText="{{ 'widget-config.set' | translate }}"
+                                  formControlName="eventsTitle"
+  ></tb-string-pattern-autocomplete>
   <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.gateway.events-filter</mat-label>
     <mat-chip-grid #chipList formControlName="eventsReg">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.ts
index 990c41ab03..63af1f7c21 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -32,6 +32,8 @@ export class GatewayEventsWidgetSettingsComponent extends WidgetSettingsComponen
   separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
 
   gatewayEventsWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
index cabd91d4e7..1406e168ce 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
@@ -20,9 +20,16 @@
     <div class="tb-form-panel-title" translate>widgets.input-widgets.general-settings</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" translate>widgets.input-widgets.widget-title</div>
-      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-        <input matInput formControlName="widgetTitle" placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <tb-string-pattern-autocomplete class="flex-1"
+                                      brackets="curly"
+                                      subscriptSizing="dynamic"
+                                      predefinedValuesButton="true"
+                                      appearance="outline"
+                                      label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                      [predefinedValues]="predefinedValues"
+                                      placeholderText="{{ 'widget-config.set' | translate }}"
+                                      formControlName="widgetTitle"
+      ></tb-string-pattern-autocomplete>
     </div>
   </div>
   <div class="tb-form-panel">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.ts
index 4e7d552f44..afbb6c2601 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.ts
@@ -16,9 +16,9 @@
 
 import { Component } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { AppState } from '@core/core.state';
 import { Store } from '@ngrx/store';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
 
 @Component({
   selector: 'tb-photo-camera-input-widget-settings',
@@ -29,6 +29,8 @@ export class PhotoCameraInputWidgetSettingsComponent extends WidgetSettingsCompo
 
   photoCameraInputWidgetSettingsForm: UntypedFormGroup;
 
+  predefinedValues = widgetTitleAutocompleteValues;
+
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
index b2c7f1a24c..36d500292a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateAttributeGeneralSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
       <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.ts
index 5d9ec2d1a0..aab214d0cb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.ts
@@ -29,6 +29,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { widgetTitleAutocompleteValues } from '@app/shared/public-api';
 
 export interface UpdateAttributeGeneralSettings {
   widgetTitle: string;
@@ -77,6 +78,8 @@ export class UpdateAttributeGeneralSettingsComponent extends PageComponent imple
 
   @Input()
   hasLabelValue = true;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   private modelValue: UpdateAttributeGeneralSettings;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
index d383f34a53..80cf810daa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateBooleanAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.ts
index c9f8558b65..0b7a1785a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateBooleanAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateBooleanAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
index fb386b9eef..40dfca6223 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateImageAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.ts
index b23c8656c9..0671d6e432 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateImageAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateImageAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
index 65583517d6..78134ca969 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateJsonAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
       <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.ts
index ded4cfdc15..9c5a14e356 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateJsonAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateJsonAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
index 9774fceb1b..1553935c81 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateLocationAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.ts
index 45134e06f5..f28ca2af8f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateLocationAttributeWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateLocationAttributeWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
index 46191cceda..ce361c2fbb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
@@ -18,10 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateMultipleAttributesWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
-      <mat-label translate>widgets.input-widgets.widget-title</mat-label>
-      <input matInput formControlName="widgetTitle">
-    </mat-form-field>
+    <tb-string-pattern-autocomplete class="mat-block flex-1" 
+                                              brackets="curly" 
+                                              subscriptSizing="fixed"
+                                              predefinedValuesButton="true"
+                                              label="{{ 'widgets.input-widgets.widget-title' | translate }}"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="widgetTitle"
+    ></tb-string-pattern-autocomplete>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts
index fa2b6538d5..ac59f7f45a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { WidgetSettings, WidgetSettingsComponent, widgetTitleAutocompleteValues } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { AppState } from '@core/core.state';
 export class UpdateMultipleAttributesWidgetSettingsComponent extends WidgetSettingsComponent {
 
   updateMultipleAttributesWidgetSettingsForm: UntypedFormGroup;
+  
+  predefinedValues = widgetTitleAutocompleteValues;
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 35c6fde3f1..db8b78dae6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -41,9 +41,22 @@
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title</div>
           <div class="flex flex-1 flex-row items-center justify-start gap-2">
-            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-              <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
-            </mat-form-field>
+            @if (widgetType === widgetTypes.static || widgetType === widgetTypes.alarm) {
+              <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+              </mat-form-field>
+            } @else {
+              <tb-string-pattern-autocomplete class="flex-1"
+                                              appearance="outline"
+                                              brackets="curly"
+                                              subscriptSizing="dynamic"
+                                              [predefinedValuesButton]="true"
+                                              [disabled]="!widgetSettings.get('showTitle').value"
+                                              [predefinedValues]="predefinedValues"
+                                              placeholderText="{{ 'widget-config.set' | translate }}"
+                                              formControlName="title"
+              ></tb-string-pattern-autocomplete>
+            }
             <tb-font-settings formControlName="titleFont"
                               clearButton
                               [previewText]="widgetSettings.get('title').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
index c23619f5c0..5967fb4c1a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
@@ -40,6 +40,7 @@ import {
   Widget,
   widgetTypeCanHaveTimewindow,
   WidgetConfigMode,
+  widgetTitleAutocompleteValues,
   widgetType
 } from '@shared/models/widget.models';
 import {
@@ -178,6 +179,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
 
   headerOptions: ToggleHeaderOption[] = [];
   selectedOption: string;
+  predefinedValues = widgetTitleAutocompleteValues;
 
   public dataSettings: UntypedFormGroup;
   public targetDeviceSettings: UntypedFormGroup;
diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
index c582a21b3f..293381194e 100644
--- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
@@ -553,7 +553,7 @@ export class LabelVariablePattern {
         const entityInfo = this.ctx.defaultSubscription.getFirstEntityInfo();
         label = createLabelFromSubscriptionEntityInfo(entityInfo, label);
       } else {
-        const datasource = this.ctx.defaultSubscription?.firstDatasource;
+        const datasource = this.ctx.defaultSubscription?.firstDatasource ?? (this.ctx as any).mapInstance?.getData()[0];
         label = createLabelFromDatasource(datasource, label);
       }
     }
diff --git a/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.html b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.html
new file mode 100644
index 0000000000..52a960daea
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.html
@@ -0,0 +1,59 @@
+<!--
+
+    Copyright © 2016-2025 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<mat-form-field [appearance]="appearance" [class]="additionalClass"
+                [subscriptSizing]="subscriptSizing" style="width: 100%">
+  <mat-label *ngIf="label">{{label}}</mat-label>
+  <pre #highlightTextRef class="highlighted-text" [class.disabled]="disabled" [innerHTML]="highlightedHtml"></pre>
+  <input matInput #inputRef
+         class="input-field-highlight"
+         [formControl]="selectionFormControl"
+         [placeholder]="placeholderText"
+         (focusin)="onFocus()"
+         (scroll)="onInputScroll($event)">
+  @if (predefinedValuesButton) {
+    <button type="button"
+            matSuffix
+            mat-icon-button
+            [disabled]="disabled"
+            (click)="openValues($event)">
+      <tb-icon matButtonIcon="">mdi:variable</tb-icon>
+    </button>
+  }
+  <mat-icon *ngIf="selectionFormControl.hasError('required') && !showInlineError"
+            matIconSuffix
+            [matTooltip]="errorText"
+            matTooltipPosition="above"
+            [matTooltipClass]="tooltipClass"
+            class="material-icons tb-suffix-show-always tb-error">
+    warning
+  </mat-icon>
+  <mat-error *ngIf="selectionFormControl.hasError('required') && showInlineError">
+    {{errorText}}
+  </mat-error>
+</mat-form-field>
+<ng-template #autocompleteTemplate>
+  <div role="listbox" class="mat-mdc-autocomplete-panel mat-mdc-autocomplete-visible tb-autocomplete tb-sting-pattern-autocomplete-panel">
+    @for(option of filteredOptions; track option; let i = $index) {
+      <mat-option (click)="optionSelected(option)"
+                  class="mdc-list-item" #optionItem
+                  [class.mat-mdc-option-active]="i === activeOptionIndex">
+        <span class="flex-1" [innerHTML]="option | highlight:searchText:false:'ig'"></span>
+      </mat-option>
+    }
+  </div>
+</ng-template>
diff --git a/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss
new file mode 100644
index 0000000000..2aca1c5081
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss
@@ -0,0 +1,98 @@
+/**
+ * Copyright © 2016-2025 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import "constants";
+
+:host {
+  .highlighted-text {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    z-index: 1;
+    pointer-events: none;
+    padding-top: var(--mat-form-field-filled-with-label-container-padding-top);
+    padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom);
+    font: inherit;
+    letter-spacing: inherit;
+    text-decoration: inherit;
+    text-transform: inherit;
+    overflow: hidden;
+    color: var(--mdc-filled-text-field-input-text-color, var(--mat-app-on-surface));
+
+    &.disabled {
+      color: var(--mdc-filled-text-field-disabled-input-text-color);
+    }
+  }
+
+  .input-field-highlight {
+    position: relative;
+    background: transparent;
+    z-index: 2;
+    color: transparent;
+    width: 100%;
+  }
+}
+
+:host ::ng-deep {
+
+  .mdc-text-field--outlined .mat-mdc-form-field-infix {
+    .highlighted-text {
+      padding-top: var(--mat-form-field-container-vertical-padding);
+      padding-bottom: var(--mat-form-field-container-vertical-padding);
+    }
+  }
+
+  .highlighted-text {
+    .highlight {
+      color: $tb-secondary-color;
+      text-shadow: 0 0 0.5px var($tb-secondary-color, var(--mat-app-on-surface));
+    }
+
+    &.disabled {
+      .highlight {
+        color: $tb-primary-color-light;
+        text-shadow: 0 0 0.5px var($tb-primary-color-light, var(--mdc-filled-text-field-disabled-input-text-color));
+      }
+    }
+  }
+}
+
+::ng-deep {
+  div.tb-sting-pattern-autocomplete-panel {
+    width: 100%;
+    max-height: 256px;
+    visibility: visible;
+    transform-origin: center top;
+    overflow: auto;
+    padding: 8px 0;
+    box-sizing: border-box;
+    position: static;
+    border-radius: var(--mat-autocomplete-container-shape, var(--mat-app-corner-extra-small));
+    box-shadow: var(--mat-autocomplete-container-elevation-shadow);
+    background-color: var(--mat-autocomplete-background-color, var(--mat-app-surface-container))
+  }
+
+  .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) & {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .mat-mdc-autocomplete-panel-above & {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    transform-origin: center bottom;
+  }
+
+}
diff --git a/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.ts b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.ts
new file mode 100644
index 0000000000..c1278584e3
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.ts
@@ -0,0 +1,434 @@
+///
+/// Copyright © 2016-2025 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import {
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  ElementRef,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnInit,
+  QueryList,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef
+} from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { fromEvent, merge } from 'rxjs';
+import { debounceTime, tap } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+import { coerceBoolean } from '@shared/decorators/coercion';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  ConnectedPosition,
+  FlexibleConnectedPositionStrategy,
+  Overlay,
+  OverlayRef,
+  PositionStrategy
+} from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+
+@Component({
+  selector: 'tb-string-pattern-autocomplete',
+  templateUrl: './string-pattern-autocomplete.component.html',
+  styleUrls: ['./string-pattern-autocomplete.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => StringPatternAutocompleteComponent),
+      multi: true
+    }
+  ]
+})
+export class StringPatternAutocompleteComponent implements ControlValueAccessor, OnInit, OnChanges {
+
+  @ViewChild('inputRef', {static: true}) inputRef: ElementRef;
+  @ViewChild('highlightTextRef', {static: true}) highlightTextRef: ElementRef;
+  @ViewChild('autocompleteTemplate', {static: true}) autocompleteTemplate: TemplateRef<any>;
+  @ViewChildren('optionItem', { read: ElementRef }) optionItems!: QueryList<ElementRef<HTMLElement>>;
+
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  @coerceBoolean()
+  required = false;
+
+  @Input({required: true})
+  predefinedValues: Array<string>;
+
+  @Input()
+  placeholderText: string = this.translate.instant('widget-config.set');
+
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
+  @Input()
+  additionalClass: string | string[] | Record<string, boolean | undefined | null>;
+
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
+  @Input()
+  label: string;
+
+  @Input()
+  tooltipClass = 'tb-error-tooltip';
+
+  @Input()
+  errorText: string;
+
+  @Input()
+  @coerceBoolean()
+  showInlineError = false;
+
+  @Input()
+  @coerceBoolean()
+  predefinedValuesButton = false;
+
+  @Input()
+  patternSymbol = '$';
+
+  @Input()
+  brackets: 'curly' | 'square';
+
+  selectionFormControl: FormControl;
+  filteredOptions: Array<string>;
+
+  searchText = '';
+  highlightedHtml = '';
+  activeOptionIndex = -1;
+
+  private modelValue: string | null;
+  private overlayRef!: OverlayRef;
+
+  private predefinedValuesButtonMode = false;
+
+  private propagateChange = (_val: any) => {
+  };
+
+  constructor(private fb: FormBuilder,
+              private overlay: Overlay,
+              private translate: TranslateService,
+              private viewContainerRef: ViewContainerRef,
+              private destroyRef: DestroyRef,
+              private cd: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    this.selectionFormControl = this.fb.control('', this.required ? [Validators.required] : []);
+    merge(
+      fromEvent(this.inputRef.nativeElement, 'selectionchange'),
+      this.selectionFormControl.valueChanges.pipe(tap(value => this.updateView(value)))
+    ).pipe(
+      debounceTime(50),
+      takeUntilDestroyed(this.destroyRef)
+    ).subscribe(() => {
+      this.onSelectionChange();
+      this.cd.markForCheck();
+    });
+
+    fromEvent<KeyboardEvent>(this.inputRef.nativeElement, 'keydown')
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(event => this.handleKeydown(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    for (const propName of Object.keys(changes)) {
+      const change = changes[propName];
+      if (!change.firstChange && change.currentValue !== change.previousValue) {
+        if (propName === 'predefinedValues' || propName === 'patternSymbol') {
+          this.highlightedHtml = this.getHighlightHtml(this.modelValue);
+        }
+        if (propName === 'required') {
+          if (change.currentValue) {
+            this.selectionFormControl.addValidators(Validators.required);
+          } else {
+            this.selectionFormControl.removeValidators(Validators.required);
+          }
+          this.selectionFormControl.updateValueAndValidity({emitEvent: false})
+        }
+      }
+    }
+  }
+
+  writeValue(option?: string): void {
+    this.searchText = '';
+    this.modelValue = option ?? null;
+    this.highlightedHtml = this.getHighlightHtml(this.modelValue);
+    this.selectionFormControl.patchValue(this.modelValue, {emitEvent: false});
+  }
+
+  onFocus() {
+    this.onSelectionChange();
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(_fn: any): void {
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (this.disabled) {
+      this.selectionFormControl.disable({emitEvent: false});
+      this.closeAutocomplete();
+    } else {
+      this.selectionFormControl.enable({emitEvent: false});
+    }
+  }
+
+  onInputScroll(event: Event) {
+    const scrollLeft = (event.target as HTMLInputElement).scrollLeft;
+    const scrollTop = (event.target as HTMLInputElement).scrollTop;
+    if (this.highlightTextRef && this.highlightTextRef.nativeElement) {
+      this.highlightTextRef.nativeElement.scrollLeft = scrollLeft;
+      this.highlightTextRef.nativeElement.scrollTop = scrollTop;
+    }
+  }
+
+  optionSelected(value: string) {
+    const position = this.inputRef.nativeElement.selectionStart;
+    const triggerIndex = this.predefinedValuesButtonMode ? position : this.modelValue.lastIndexOf(this.patternSymbol, position - 1);
+    if (triggerIndex === -1) {
+      return;
+    }
+    let prepareValue: string;
+    switch (this.brackets) {
+      case 'curly':
+        prepareValue = `{${value}}`;
+        break;
+      case 'square':
+        prepareValue = `[${value}]`;
+        break;
+      default:
+        prepareValue = value;
+    }
+    const base = this.modelValue ?? '';
+    const newText = `${base.substring(0, triggerIndex)}${this.patternSymbol}${prepareValue}${base.substring(position)}`;
+    this.selectionFormControl.patchValue(newText);
+    this.searchText = '';
+    setTimeout(() => {
+      this.inputRef.nativeElement.setSelectionRange(triggerIndex + prepareValue.length + 1, triggerIndex + prepareValue.length + 1);
+      this.inputRef.nativeElement.focus();
+    });
+    this.closeAutocomplete();
+  }
+
+  openValues($event: MouseEvent) {
+    $event.stopPropagation();
+    const selectionStart = this.inputRef.nativeElement.selectionStart;
+    this.filteredOptions = [...this.predefinedValues];
+    this.predefinedValuesButtonMode = true;
+    this.openAutocomplete(selectionStart);
+  }
+
+  private updateView(value: string) {
+    if (this.modelValue !== value) {
+      this.modelValue = value;
+      this.highlightedHtml = this.getHighlightHtml(this.modelValue);
+      this.propagateChange(this.modelValue);
+    }
+  }
+
+  private onSelectionChange() {
+    const selectionStart = this.inputRef.nativeElement.selectionStart;
+    const selectionEnd = this.inputRef.nativeElement.selectionEnd;
+    if (selectionStart === selectionEnd && selectionStart > 0 && !this.disabled) {
+      this.filteredOptions = this.getFilteredOptions(this.modelValue, selectionStart);
+      this.activeOptionIndex = 0;
+    } else {
+      this.filteredOptions = [];
+      this.activeOptionIndex = -1;
+    }
+    if (this.filteredOptions.length) {
+      this.openAutocomplete(selectionStart);
+    } else {
+      this.closeAutocomplete()
+    }
+  }
+
+  private getHighlightHtml(text: string): string {
+    if (!text) {
+      return '';
+    }
+    let regex: RegExp;
+    let simpleGroup = false;
+    text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    switch (this.brackets) {
+      case 'curly':
+        regex = new RegExp(`([${this.patternSymbol}](\\{([^}]*)\\}))`, 'g');
+        break;
+      case 'square':
+        regex = new RegExp(`([${this.patternSymbol}](\\[([^]]*)\\]))`, 'g');
+        break;
+      default:
+        regex = new RegExp(`([${this.patternSymbol}](\\w+))`, 'g');
+        simpleGroup = true
+        break
+    }
+    return text.replace(regex, (_match: string, p1: string, p2: string, p3: string) => {
+      const value = simpleGroup ? p2 : p3;
+      if (this.predefinedValues.includes(value)) {
+        return `<span class="highlight">${p1}</span>`
+      }
+      return p1;
+    });
+  }
+
+  private getFilteredOptions(text: string, index = text.length): Array<string> {
+    const triggerIndex = text.lastIndexOf(this.patternSymbol, index - 1);
+    if (triggerIndex === -1) {
+      return [];
+    }
+
+    let currentWordEndIndex = text.indexOf(' ', index);
+
+    if (currentWordEndIndex === -1) {
+      currentWordEndIndex = text.length;
+    }
+
+    let startOffset = 1;
+    switch (this.brackets) {
+      case 'curly':
+        if (text[triggerIndex + startOffset] === '{') {
+          startOffset++;
+        }
+        break;
+      case 'square':
+        if (text[triggerIndex + startOffset] === '[') {
+          startOffset++;
+        }
+        break;
+    }
+
+    this.searchText = text.substring(triggerIndex + startOffset, currentWordEndIndex).toLowerCase();
+    if (this.searchText.includes(' ')) {
+      return [];
+    }
+
+    const result = this.predefinedValues.filter(value => value.toLowerCase().startsWith(this.searchText));
+    if (result.length === 1 && result[0].toLowerCase() === this.searchText) {
+      return [];
+    }
+    return result;
+  }
+
+  private openAutocomplete(cursorIndex?: number): void {
+    const patternIndex = this.predefinedValuesButtonMode ? cursorIndex : this.modelValue.lastIndexOf(this.patternSymbol, cursorIndex - 1);
+    if (!this.overlayRef) {
+      this.overlayRef = this.overlay.create({
+        positionStrategy: this.getOverlayPosition(patternIndex),
+        scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        panelClass: 'tb-select-overlay',
+        backdropClass: 'cdk-overlay-transparent-backdrop',
+        hasBackdrop: true
+      });
+      this.overlayRef.backdropClick().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.closeAutocomplete());
+    }
+    if (!this.overlayRef.hasAttached()) {
+      const templatePortal = new TemplatePortal(this.autocompleteTemplate, this.viewContainerRef);
+      this.overlayRef.attach(templatePortal);
+      this.overlayRef.updatePositionStrategy(this.getOverlayPosition(patternIndex))
+    }
+  }
+
+  private closeAutocomplete(): void {
+    this.predefinedValuesButtonMode = false;
+    if (this.overlayRef && this.overlayRef.hasAttached()) {
+      this.overlayRef.detach();
+    }
+  }
+
+  private getOverlayPosition(patternIndex: number): PositionStrategy {
+    const strategy = this.overlay
+      .position()
+      .flexibleConnectedTo(this.inputRef)
+      .withFlexibleDimensions(false)
+      .withPush(false);
+
+    this.setStrategyPositions(strategy, patternIndex);
+    return strategy;
+  }
+
+  private setStrategyPositions(positionStrategy: FlexibleConnectedPositionStrategy, patternIndex: number) {
+    let offsetX = patternIndex > 0 ? patternIndex * 8 : 0;
+    const inputBounds = this.inputRef.nativeElement.getBoundingClientRect();
+    if (offsetX + 180 > inputBounds.width) {
+      offsetX = inputBounds.width - 180;
+    }
+    const belowPositions: ConnectedPosition[] = [
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetX},
+      {originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetX},
+    ];
+
+    const panelClass = 'mat-mdc-autocomplete-panel-above';
+    const abovePositions: ConnectedPosition[] = [
+      {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', panelClass, offsetX},
+      {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', panelClass, offsetX},
+    ];
+
+    const positions = [...belowPositions, ...abovePositions];
+    positionStrategy.withPositions(positions);
+  }
+
+  private setActiveOption(index: number): void {
+    if (this.filteredOptions.length === 0) {
+      this.activeOptionIndex = -1;
+      return;
+    }
+
+    this.activeOptionIndex = Math.max(-1, Math.min(index, this.filteredOptions.length - 1));
+    this.cd.markForCheck();
+
+    if (this.activeOptionIndex >= 0 && this.optionItems.get(this.activeOptionIndex)) {
+      this.optionItems.get(this.activeOptionIndex).nativeElement.scrollIntoView({ block: 'nearest' })
+    }
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (!this.overlayRef?.hasAttached()) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.setActiveOption(this.activeOptionIndex + 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.setActiveOption(this.activeOptionIndex - 1);
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (this.activeOptionIndex >= 0 && this.activeOptionIndex < this.filteredOptions.length) {
+          this.optionSelected(this.filteredOptions[this.activeOptionIndex]);
+        }
+        break;
+      case 'Escape':
+        this.closeAutocomplete();
+        break;
+    }
+  }
+}
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index f612dd1503..6f4237a94b 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -72,6 +72,8 @@ export interface WidgetTypeData {
   template: WidgetTypeTemplate;
 }
 
+export const widgetTitleAutocompleteValues = ['entityName', 'entityLabel'];
+
 export const widgetTypesData = new Map<widgetType, WidgetTypeData>(
   [
     [
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index da6bc9f20b..d02f28a477 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -228,6 +228,7 @@ import { JsFuncModuleRowComponent } from '@shared/components/js-func-module-row.
 import { EntityKeyAutocompleteComponent } from '@shared/components/entity/entity-key-autocomplete.component';
 import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
 import { MqttVersionSelectComponent } from '@shared/components/mqtt-version-select.component';
+import { StringPatternAutocompleteComponent } from '@shared/components/string-pattern-autocomplete.component';
 import { TimeUnitInputComponent } from '@shared/components/time-unit-input.component';
 import { DateExpirationPipe } from '@shared/pipe/date-expiration.pipe';
 
@@ -448,6 +449,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     EntityKeyAutocompleteComponent,
     MqttVersionSelectComponent,
     TimeUnitInputComponent,
+    StringPatternAutocompleteComponent
   ],
   imports: [
     CommonModule,
@@ -714,6 +716,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     EntityKeyAutocompleteComponent,
     MqttVersionSelectComponent,
     TimeUnitInputComponent,
+    StringPatternAutocompleteComponent
   ]
 })
 export class SharedModule { }
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index b88145331c..af166b406d 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -422,10 +422,13 @@
           }
         }
         .mat-mdc-form-field-infix {
+          --mat-form-field-container-vertical-padding: 8px;
           padding-top: 8px;
           padding-bottom: 8px;
           min-height: 40px;
           width: auto;
+          font-weight: 400;
+          font-size: 14px;
           .mdc-text-field__input, .mat-mdc-select {
             font-weight: 400;
             font-size: 14px;
diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss
index 54ce3c6eb6..2c9ddb5b2e 100644
--- a/ui-ngx/src/scss/constants.scss
+++ b/ui-ngx/src/scss/constants.scss
@@ -36,4 +36,4 @@ $tb-secondary-color: #527dad;
 $tb-hue3-color: #a7c1de;
 
 $tb-dark-primary-color: #9fa8da;
-
+$tb-primary-color-light: #7986cb;
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index 08805ca424..8264a96371 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -25,7 +25,7 @@ $tb-mat-indigo: (
   50: #e8eaf6,
   100: #c5cae9,
   200: #9fa8da,
-  300: #7986cb,
+  300: $tb-primary-color-light,
   400: #5c6bc0,
   500: $tb-primary-color,
   600: $tb-secondary-color,