diff --git a/client/src/app/shared/components/extension-field/extension-field.component.html b/client/src/app/shared/components/extension-field/extension-field.component.html
new file mode 100644
index 000000000..c4bd6b7a7
--- /dev/null
+++ b/client/src/app/shared/components/extension-field/extension-field.component.html
@@ -0,0 +1,54 @@
+
+
+
{{ title }}
+
+
+
+
+
+
+ {{ chipValue || '–' }}
+
+
+ {{ chipValue }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/src/app/shared/components/extension-field/extension-field.component.scss b/client/src/app/shared/components/extension-field/extension-field.component.scss
new file mode 100644
index 000000000..df6f5afe9
--- /dev/null
+++ b/client/src/app/shared/components/extension-field/extension-field.component.scss
@@ -0,0 +1,3 @@
+.extension-container .mat-form-field {
+ display: block;
+}
diff --git a/client/src/app/shared/components/extension-field/extension-field.component.spec.ts b/client/src/app/shared/components/extension-field/extension-field.component.spec.ts
new file mode 100644
index 000000000..5294e9f8d
--- /dev/null
+++ b/client/src/app/shared/components/extension-field/extension-field.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExtensionFieldComponent } from './extension-field.component';
+import { E2EImportsModule } from 'e2e-imports.module';
+
+describe('ExtensionFieldComponent', () => {
+ let component: ExtensionFieldComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [E2EImportsModule]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ExtensionFieldComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/client/src/app/shared/components/extension-field/extension-field.component.ts b/client/src/app/shared/components/extension-field/extension-field.component.ts
new file mode 100644
index 000000000..5dc5231c0
--- /dev/null
+++ b/client/src/app/shared/components/extension-field/extension-field.component.ts
@@ -0,0 +1,177 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+@Component({
+ selector: 'os-extension-field',
+ templateUrl: './extension-field.component.html',
+ styleUrls: ['./extension-field.component.scss']
+})
+export class ExtensionFieldComponent implements OnInit {
+ /**
+ * Optional additional classes for the `mat-chip`.
+ */
+ @Input()
+ public classes: string | string[] | object = 'bluegrey';
+
+ /**
+ * Title for this component.
+ */
+ @Input()
+ public title: string;
+
+ /**
+ * Value of the chip.
+ */
+ @Input()
+ public chipValue: string;
+
+ /**
+ * Boolean, whether the extension should be shown.
+ */
+ @Input()
+ public hasExtension = false;
+
+ /**
+ * Optional label for the input.
+ */
+ @Input()
+ public extensionLabel: string;
+
+ /**
+ * Optional label for the search-list.
+ */
+ @Input()
+ public searchListLabel: string;
+
+ /**
+ * BehaviourSubject for the search-list.
+ */
+ @Input()
+ public searchList: BehaviorSubject