diff --git a/apps/web/src/app/organizations/organization.module.ts b/apps/web/src/app/organizations/organization.module.ts
index f32e4f5310..d894f53e09 100644
--- a/apps/web/src/app/organizations/organization.module.ts
+++ b/apps/web/src/app/organizations/organization.module.ts
@@ -1,11 +1,10 @@
import { NgModule } from "@angular/core";
-import { SharedModule } from "../shared";
-
import { AccessSelectorModule } from "./components/access-selector";
import { OrganizationsRoutingModule } from "./organization-routing.module";
+import { SharedOrganizationModule } from "./shared";
@NgModule({
- imports: [SharedModule, AccessSelectorModule, OrganizationsRoutingModule],
+ imports: [SharedOrganizationModule, AccessSelectorModule, OrganizationsRoutingModule],
})
export class OrganizationModule {}
diff --git a/apps/web/src/app/organizations/shared/components/search-input/search-input.component.html b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.html
new file mode 100644
index 0000000000..2396dc3423
--- /dev/null
+++ b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.html
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/apps/web/src/app/organizations/shared/components/search-input/search-input.component.ts b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.ts
new file mode 100644
index 0000000000..4bdcf665cd
--- /dev/null
+++ b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.ts
@@ -0,0 +1,54 @@
+import { Component, Input } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+let nextId = 0;
+
+@Component({
+ selector: "app-search-input",
+ templateUrl: "./search-input.component.html",
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ multi: true,
+ useExisting: SearchInputComponent,
+ },
+ ],
+})
+export class SearchInputComponent implements ControlValueAccessor {
+ private notifyOnChange: (v: string) => void;
+ private notifyOnTouch: () => void;
+
+ protected id = `search-id-${nextId++}`;
+ protected searchText: string;
+
+ @Input() disabled: boolean;
+ @Input() placeholder: string;
+
+ onChange(searchText: string) {
+ if (this.notifyOnChange != undefined) {
+ this.notifyOnChange(searchText);
+ }
+ }
+
+ onTouch() {
+ if (this.notifyOnTouch != undefined) {
+ this.notifyOnTouch();
+ }
+ }
+
+ registerOnChange(fn: (v: string) => void): void {
+ this.notifyOnChange = fn;
+ }
+
+ registerOnTouched(fn: () => void): void {
+ this.notifyOnTouch = fn;
+ }
+
+ writeValue(searchText: string): void {
+ this.searchText = searchText;
+ }
+
+ setDisabledState(isDisabled: boolean) {
+ this.disabled = isDisabled;
+ }
+}
diff --git a/apps/web/src/app/organizations/shared/components/search-input/search-input.stories.ts b/apps/web/src/app/organizations/shared/components/search-input/search-input.stories.ts
new file mode 100644
index 0000000000..ee72e91ad5
--- /dev/null
+++ b/apps/web/src/app/organizations/shared/components/search-input/search-input.stories.ts
@@ -0,0 +1,36 @@
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { InputModule } from "@bitwarden/components/src/input/input.module";
+
+import { PreloadedEnglishI18nModule } from "../../../../tests/preloaded-english-i18n.module";
+
+import { SearchInputComponent } from "./search-input.component";
+
+export default {
+ title: "Web/Organizations/Search Input",
+ component: SearchInputComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [
+ InputModule,
+ FormsModule,
+ ReactiveFormsModule,
+ PreloadedEnglishI18nModule,
+ JslibModule,
+ ],
+ providers: [],
+ }),
+ ],
+} as Meta;
+
+const Template: Story = (args: SearchInputComponent) => ({
+ props: args,
+ template: `
+
+ `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/apps/web/src/app/organizations/shared/index.ts b/apps/web/src/app/organizations/shared/index.ts
new file mode 100644
index 0000000000..941a5ddd63
--- /dev/null
+++ b/apps/web/src/app/organizations/shared/index.ts
@@ -0,0 +1 @@
+export * from "./shared-organization.module";
diff --git a/apps/web/src/app/organizations/shared/shared-organization.module.ts b/apps/web/src/app/organizations/shared/shared-organization.module.ts
new file mode 100644
index 0000000000..ce5c45f0fc
--- /dev/null
+++ b/apps/web/src/app/organizations/shared/shared-organization.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../shared";
+
+import { SearchInputComponent } from "./components/search-input/search-input.component";
+
+@NgModule({
+ imports: [SharedModule],
+ declarations: [SearchInputComponent],
+ exports: [SharedModule, SearchInputComponent],
+})
+export class SharedOrganizationModule {}