diff --git a/projects/portal/src/index.html b/projects/portal/src/index.html
index acb5cb0bb5..a948aaaac2 100644
--- a/projects/portal/src/index.html
+++ b/projects/portal/src/index.html
@@ -197,6 +197,7 @@ <h4>
     </div>
 
     <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <script>
       new window.VLibras.Widget('https://vlibras.gov.br/app');
     </script>
diff --git a/projects/ui/src/lib/components/po-search/enum/po-search-filter-mode.enum.ts b/projects/ui/src/lib/components/po-search/enum/po-search-filter-mode.enum.ts
index 17824803da..c427944b5b 100644
--- a/projects/ui/src/lib/components/po-search/enum/po-search-filter-mode.enum.ts
+++ b/projects/ui/src/lib/components/po-search/enum/po-search-filter-mode.enum.ts
@@ -3,7 +3,7 @@
  *
  * @description
  *
- * Define o tipo de busca usado no po-multiselect.
+ * Define o tipo de busca usado no po-search.
  */
 export enum PoSearchFilterMode {
   /** Verifica se o texto *inicia* com o valor pesquisado. */
diff --git a/projects/ui/src/lib/components/po-search/index.ts b/projects/ui/src/lib/components/po-search/index.ts
index 0986a9393c..2f9ad82470 100644
--- a/projects/ui/src/lib/components/po-search/index.ts
+++ b/projects/ui/src/lib/components/po-search/index.ts
@@ -1,3 +1,4 @@
 export * from './po-search.component';
 export * from './po-search.module';
-export * from './po-search-filter-mode.enum';
+export * from './enum/po-search-filter-mode.enum';
+export * from './literals/po-search-literals';
diff --git a/projects/ui/src/lib/components/po-search/literals/po-search-literals-default.ts b/projects/ui/src/lib/components/po-search/literals/po-search-literals-default.ts
new file mode 100644
index 0000000000..277929b3c3
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/literals/po-search-literals-default.ts
@@ -0,0 +1,20 @@
+import { PoSearchLiterals } from './po-search-literals';
+
+export const poSearchLiteralsDefault = {
+  en: <PoSearchLiterals>{
+    search: 'Search',
+    clean: 'Clean'
+  },
+  es: <PoSearchLiterals>{
+    search: 'Buscar',
+    clean: 'limpiar'
+  },
+  pt: <PoSearchLiterals>{
+    search: 'Pesquisar',
+    clean: 'Apagar'
+  },
+  ru: <PoSearchLiterals>{
+    search: 'Поиск',
+    clean: 'чистый'
+  }
+};
diff --git a/projects/ui/src/lib/components/po-search/literals/po-search-literals.ts b/projects/ui/src/lib/components/po-search/literals/po-search-literals.ts
index b5eb073f8b..016ecd3ab6 100644
--- a/projects/ui/src/lib/components/po-search/literals/po-search-literals.ts
+++ b/projects/ui/src/lib/components/po-search/literals/po-search-literals.ts
@@ -6,7 +6,18 @@ export interface PoSearchLiterals {
    *
    * @description
    *
-   * search: Texto exibido no *placeholder*  do filtro do componente menu.
+   * search: Texto exibido no *placeholder*  do filtro do componente `po-search`.
    */
   search?: string;
+
+  /**
+   * @usedBy PoSearchComponent
+   *
+   * @optional
+   *
+   * @description
+   *
+   * search: Texto usado no leitor de tela para acessibilidade.
+   */
+  clean?: string;
 }
diff --git a/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts b/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts
index 7e6ea14cf4..1e09bc84ea 100644
--- a/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts
+++ b/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts
@@ -1,13 +1,53 @@
 import { PoSearchBaseComponent } from './po-search-base.component';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { poSearchLiteralsDefault } from './literals/po-search-literals-default';
+import { poLocaleDefault } from '../../services/po-language/po-language.constant';
+import * as Utils from '../../utils/util';
 
 describe('PoSearchBaseComponent', () => {
   let component: PoSearchBaseComponent;
 
   beforeEach(() => {
-    component = new PoSearchBaseComponent();
+    component = new PoSearchBaseComponent(new PoLanguageService());
   });
 
   it('should create an instance', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('Properties:', () => {
+    it('label: should set label when is setted', () => {
+      component.ariaLabel = 'Search';
+
+      expect(component.ariaLabel).toBe('Search');
+    });
+
+    it('label: should concat label with literals', () => {
+      component.ariaLabel = 'label button';
+      expect(component.ariaLabel).toBe('label button Search');
+    });
+
+    it('should be set `literals` with browser language if `literals` is `undefined`', () => {
+      component['language'] = Utils.browserLanguage();
+      component.literals = undefined;
+
+      expect(component.literals).toEqual(poSearchLiteralsDefault[Utils.browserLanguage()]);
+    });
+
+    it('should be in portuguese if browser is set with `pt`.', () => {
+      component['language'] = 'pt';
+
+      component.literals = {};
+
+      expect(component.literals).toEqual(poSearchLiteralsDefault[poLocaleDefault]);
+    });
+
+    it('should be in english if browser is set with `en`.', () => {
+      component['language'] = 'en';
+
+      component.literals = {};
+
+      expect(component.literals).toEqual(poSearchLiteralsDefault.en);
+    });
+  });
 });
diff --git a/projects/ui/src/lib/components/po-search/po-search-base.component.ts b/projects/ui/src/lib/components/po-search/po-search-base.component.ts
index 2ec1f4d76d..d0b9c1d68e 100644
--- a/projects/ui/src/lib/components/po-search/po-search-base.component.ts
+++ b/projects/ui/src/lib/components/po-search/po-search-base.component.ts
@@ -1,21 +1,187 @@
-import { PoFilterMode } from './po-search-filter-mode.enum';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { poLocaleDefault } from '../../services/po-language/po-language.constant';
 
-import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import { convertToBoolean } from '../../utils/util';
+import { PoSearchLiterals } from './literals/po-search-literals';
+import { poSearchLiteralsDefault } from './literals/po-search-literals-default';
+import { PoSearchFilterMode } from './enum/po-search-filter-mode.enum';
 
+/**
+ * @description
+ *
+ * O componente search, também conhecido como barra de pesquisa, é utilizado para ajudar os usuários a localizar um determinado conteúdo
+ *
+ * Normalmente localizado no canto superior direito, junto com o ícone de lupa, uma vez que este ícone é amplamente reconhecido.
+ *
+ * Portanto, é de extrema importância que, ao utilizar este componente, as pessoas responsáveis por seu desenvolvimento considerem os seguintes critérios.
+ *
+ * #### Boas práticas
+ *
+ * Foram estruturados os padrões de usabilidade para auxiliar na utilização do componente e garantir uma boa experiência aos usuários. Por isso, é muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em consideração os seguintes critérios:
+ * - Utilize labels para apresentar resultados que estão sendo exibidos e apresente os resultados mais relevantes primeiro.
+ * - Exiba uma mensagem clara quando não forem encontrados resultados para busca e sempre que possível ofereça outras sugestões de busca.
+ * - Mantenha o texto original no campo de input, que facilita a ação do usuário caso queira fazer uma nova busca com alguma modificação na pesquisa.
+ * - Caso seja possível detectar um erro de digitação, mostre os resultados para a palavra "corrigida", isso evita a frustração de não obter resultados e não força o usuário a realizar uma nova busca.
+ * - Quando apropriado, destaque os termos da busca nos resultados.
+ * - A entrada do campo de pesquisa deve caber em uma linha. Não use entradas de pesquisa de várias linhas.
+ * - Recomenda-se ter apenas uma pesquisa por página. Se você precisar de várias pesquisas, rotule-as claramente para indicar sua finalidade.
+ * - Se possível, forneça sugestões de pesquisa, seja em um helptext ou sugestão de pesquisa que é um autocomplete. Isso ajuda os usuários a encontrar o que estão procurando, especialmente se os itens pesquisáveis forem complexos.
+ *
+ * #### Acessibilidade tratada no componente
+ *
+ *  Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - Permitir a interação via teclado (2.1.1: Keyboard (A));
+ * - Alteração entre os estados precisa ser indicada por mais de um elemento além da cor (1.4.1: Use of Color);
+ */
 @Directive()
 export class PoSearchBaseComponent {
-  @Input({ alias: 'p-disabled', transform: convertToBoolean }) disabled?: boolean;
+  private _literals?: PoSearchLiterals;
+  private _ariaLabel?: string;
+  private language: string;
 
-  @Input('p-loading') loading: boolean;
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Desabilita o po-search e não permite que o usuário interaja com o mesmo.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-disabled', transform: convertToBoolean }) disabled?: boolean;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Lista de itens que serão utilizados para pesquisa
+   */
   @Input('p-items') items: Array<any> = [];
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define um aria-label para o po-search.
+   *
+   * > Devido o componente não possuir uma label assim como outros campos de texto, o `aria-label` é utilizado para acessibilidade.
+   */
+  @Input('p-aria-label') set ariaLabel(value: string) {
+    this._ariaLabel = value;
+
+    if (value !== this.literals.search) {
+      this._ariaLabel = `${this._ariaLabel} ${this.literals.search}`;
+    }
+  }
+
+  get ariaLabel(): string {
+    return this._ariaLabel;
+  }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente (p-items), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+   */
   @Input('p-filter-keys') filterKeys: Array<any> = [];
 
-  @Input('p-filter-type') filterType: PoFilterMode = PoFilterMode.startsWith;
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente (p-items), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+   */
+  @Input('p-icon') icon: string | TemplateRef<void>;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Objeto com as literais usadas no `po-search`.
+   *
+   * Para utilizar basta passar a literal que deseja customizar:
+   *
+   * ```
+   *  const customLiterals: PoSearchLiterals = {
+   *    search: 'Pesquisar',
+   *    clean: 'Limpar',
+   *  };
+   * ```
+   *
+   * E para carregar a literal customizada, basta apenas passar o objeto para o componente.
+   *
+   * ```
+   * <po-search
+   *   [p-literals]="customLiterals">
+   * </po-search>
+   * ```
+   *
+   * > O objeto padrão de literais será traduzido de acordo com o idioma do
+   * [`PoI18nService`](/documentation/po-i18n) ou do browser.
+   */
+  @Input('p-literals') set literals(value: PoSearchLiterals) {
+    if (value instanceof Object && !(value instanceof Array)) {
+      this._literals = {
+        ...poSearchLiteralsDefault[poLocaleDefault],
+        ...poSearchLiteralsDefault[this.language],
+        ...value
+      };
+    } else {
+      this._literals = poSearchLiteralsDefault[this.language];
+    }
+  }
+
+  get literals() {
+    return this._literals || poSearchLiteralsDefault[this.language];
+  }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define o modo de pesquisa utilizado no campo de busca, quando habilitado. Valores definidos no enum: PoSearchFilterMode
+   *
+   * @default `startsWith`
+   */
+  @Input('p-filter-type') filterType: PoSearchFilterMode = PoSearchFilterMode.startsWith;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento disparado ao alterar valor do model.
+   */
+  @Output('p-change-model') changeModel: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Pode ser informada uma função que será disparada quando houver alterações no input.
+   */
   @Output('p-filtered-items-change') filteredItemsChange = new EventEmitter<Array<any>>();
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Pode ser informada uma função que será disparada quando houver alterações nos filtros.
+   */
   @Output('p-filter') filter: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
 }
diff --git a/projects/ui/src/lib/components/po-search/po-search-filter-mode.enum.ts b/projects/ui/src/lib/components/po-search/po-search-filter-mode.enum.ts
deleted file mode 100644
index ac0870791e..0000000000
--- a/projects/ui/src/lib/components/po-search/po-search-filter-mode.enum.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @usedBy PoSearchComponent
- *
- * @description
- *
- * Define o tipo de busca usado no po-seach.
- */
-export enum PoFilterMode {
-  /** Verifica se o texto *inicia* com o valor pesquisado. */
-  startsWith,
-  /** Verifica se o texto *contém* o valor pesquisado. */
-  contains,
-  /** Verifica se o texto *finaliza* com o valor pesquisado. */
-  endsWith
-}
diff --git a/projects/ui/src/lib/components/po-search/po-search.component.html b/projects/ui/src/lib/components/po-search/po-search.component.html
index f6eb7b38e3..5bb831edbd 100644
--- a/projects/ui/src/lib/components/po-search/po-search.component.html
+++ b/projects/ui/src/lib/components/po-search/po-search.component.html
@@ -1,12 +1,14 @@
-<div class="po-search">
+<div class="po-search" [class.po-search-disabled]="disabled">
   <div class="po-search-icon">
-    <po-icon *ngIf="!loading" p-icon="po-icon-search"></po-icon>
-    <po-loading-icon *ngIf="loading" p-size="sm"></po-loading-icon>
+    <po-icon [p-icon]="icon ? icon : 'po-icon-search'"></po-icon>
   </div>
 
   <input
     #poSearchInput
     type="text"
+    class="po-search-input"
+    [ariaLabel]="ariaLabel"
+    [class.po-search-icon-right]="!!poSearchInput.value && !disabled"
     [disabled]="disabled"
     [placeholder]="literals.search"
     (blur)="onBlur()"
@@ -14,7 +16,14 @@
     (input)="onSearchChange($event.target.value)"
   />
 
-  <div *ngIf="!!poSearchInput.value && !disabled" class="po-search-clean" [tabindex]="!disabled ? 0 : -1">
-    <po-clean [p-element-ref]="poSearchInput" (p-change-event)="clearSearch()"></po-clean>
+  <div *ngIf="!!poSearchInput.value && !disabled" class="po-search-container-clean">
+    <button
+      class="po-search-clean"
+      [ariaLabel]="literals.clean"
+      (click)="clearSearch()"
+      (keydown.enter)="clearSearch()"
+    >
+      <po-icon p-icon="po-icon-clear-content"></po-icon>
+    </button>
   </div>
 </div>
diff --git a/projects/ui/src/lib/components/po-search/po-search.component.spec.ts b/projects/ui/src/lib/components/po-search/po-search.component.spec.ts
index 80f604f0ed..268740e0d3 100644
--- a/projects/ui/src/lib/components/po-search/po-search.component.spec.ts
+++ b/projects/ui/src/lib/components/po-search/po-search.component.spec.ts
@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ElementRef, EventEmitter } from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 import { PoSearchComponent } from './po-search.component';
-import { PoFilterMode } from './po-search-filter-mode.enum';
+import { PoSearchFilterMode } from './enum/po-search-filter-mode.enum';
 
 describe('PoSearchComponent', () => {
   let component: PoSearchComponent;
@@ -32,15 +32,16 @@ describe('PoSearchComponent', () => {
   });
 
   it('clearSearch: should clear the search', () => {
-    component.clearSearch();
+    const inputElement = document.createElement('input');
+    document.body.appendChild(inputElement);
 
-    expect(component.poSearchInput.nativeElement.value).toBe('');
+    component.poSearchInput = { nativeElement: inputElement };
 
-    spyOn(component, 'onSearchChange');
     component.clearSearch();
-    expect(component.onSearchChange).toHaveBeenCalledWith('');
 
-    expect(component.filteredItemsChange.emit).toHaveBeenCalledWith(component.items);
+    expect(inputElement.value).toBe('');
+
+    document.body.removeChild(inputElement);
   });
 
   it('onSearchChange: should filter items based on search text and emit filtered items', () => {
@@ -51,7 +52,7 @@ describe('PoSearchComponent', () => {
   });
 
   it('onSearchChange: should filter items based on search text using startsWith', () => {
-    component.filterType = PoFilterMode.startsWith;
+    component.filterType = PoSearchFilterMode.startsWith;
 
     component.onSearchChange('Text');
 
@@ -60,7 +61,7 @@ describe('PoSearchComponent', () => {
   });
 
   it('onSearchChange: should filter items based on search text using endsWith', () => {
-    component.filterType = PoFilterMode.endsWith;
+    component.filterType = PoSearchFilterMode.endsWith;
 
     component.onSearchChange('2');
 
@@ -76,7 +77,7 @@ describe('PoSearchComponent', () => {
   });
 
   it('onSearchChange: should return false if filter mode is not recognized', () => {
-    component.filterType = ('invalidMode' as unknown) as PoFilterMode;
+    component.filterType = ('invalidMode' as unknown) as PoSearchFilterMode;
 
     const result = component.onSearchChange('text');
 
@@ -97,7 +98,7 @@ describe('PoSearchComponent', () => {
   });
 
   it('onSearchChange: should filter items based on search text using contains', () => {
-    component.filterType = PoFilterMode.contains;
+    component.filterType = PoSearchFilterMode.contains;
 
     component.onSearchChange('ext');
 
@@ -113,7 +114,7 @@ describe('PoSearchComponent', () => {
   it('onSearchChange: should handle null value', () => {
     const searchText = 'example';
     component.filterKeys = ['name'];
-    component.filterType = PoFilterMode.contains;
+    component.filterType = PoSearchFilterMode.contains;
     component.items = [{ name: null }];
 
     component.onSearchChange(searchText);
diff --git a/projects/ui/src/lib/components/po-search/po-search.component.ts b/projects/ui/src/lib/components/po-search/po-search.component.ts
index c7aaa3a677..b9cb2f2f7b 100644
--- a/projects/ui/src/lib/components/po-search/po-search.component.ts
+++ b/projects/ui/src/lib/components/po-search/po-search.component.ts
@@ -1,17 +1,31 @@
-import { PoFilterMode } from './po-search-filter-mode.enum';
-
 import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { PoLanguageService } from '../../services/po-language/po-language.service';
-import { PoSearchLiterals } from './literals/po-search-literals';
 import { PoSearchBaseComponent } from './po-search-base.component';
-
-export const poSearchLiteralsDefault = {
-  en: <PoSearchLiterals>{ search: 'Search' },
-  es: <PoSearchLiterals>{ search: 'Buscar' },
-  pt: <PoSearchLiterals>{ search: 'Pesquisar' },
-  ru: <PoSearchLiterals>{ search: 'Поиск' }
-};
-
+import { PoSearchFilterMode } from './enum/po-search-filter-mode.enum';
+
+/**
+ * @docsExtends PoSearchBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-search-basic" title="PO Search Basic">
+ *  <file name="sample-po-search-basic/sample-po-search-basic.component.html"> </file>
+ *  <file name="sample-po-search-basic/sample-po-search-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-search-labs" title="PO Search Labs">
+ *  <file name="sample-po-search-labs/sample-po-search-labs.component.html"> </file>
+ *  <file name="sample-po-search-labs/sample-po-search-labs.component.ts"> </file>
+ *  <file name="sample-po-search-labs/sample-po-search-labs.service.ts"> </file>
+ * </example>
+ *
+ * <example name="po-search-find-people" title="PO Search Find People">
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.html"> </file>
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.component.ts"> </file>
+ *  <file name="sample-po-search-find-people/sample-po-search-find-people.service.ts"> </file>
+ * </example>
+ *
+ */
 @Component({
   selector: 'po-search',
   templateUrl: './po-search.component.html'
@@ -21,18 +35,11 @@ export class PoSearchComponent extends PoSearchBaseComponent implements OnInit {
 
   filteredItems: Array<any> = [];
 
-  public literals?: any;
-
   constructor(public languageService: PoLanguageService, private renderer: Renderer2) {
-    super();
+    super(languageService);
   }
 
   ngOnInit(): void {
-    this.literals = {
-      ...poSearchLiteralsDefault[this.languageService?.getLanguageDefault()],
-      ...poSearchLiteralsDefault[this.languageService?.getShortLanguage()]
-    };
-
     this.filteredItems = this.items;
   }
 
@@ -40,6 +47,7 @@ export class PoSearchComponent extends PoSearchBaseComponent implements OnInit {
     this.poSearchInput.nativeElement.value = '';
     this.onSearchChange('');
     this.filteredItemsChange.emit(this.items);
+    this.poSearchInput.nativeElement.focus();
   }
 
   onBlur(): void {
@@ -64,22 +72,22 @@ export class PoSearchComponent extends PoSearchBaseComponent implements OnInit {
 
           value = value != null ? value.toLowerCase() : null;
 
-          if (this.filterType === PoFilterMode.startsWith) {
+          if (this.filterType === PoSearchFilterMode.startsWith) {
             return value != null && value.startsWith(searchText);
-          } else if (this.filterType === PoFilterMode.contains) {
+          } else if (this.filterType === PoSearchFilterMode.contains) {
             return value != null && value.includes(searchText);
-          } else if (this.filterType === PoFilterMode.endsWith) {
+          } else if (this.filterType === PoSearchFilterMode.endsWith) {
             return value != null && value.endsWith(searchText);
           }
 
           return false;
         })
       );
-
       this.filteredItemsChange.emit(this.filteredItems);
     } else {
       this.filteredItems = [];
       this.filteredItemsChange.emit(this.filteredItems);
     }
+    this.changeModel.emit(searchText);
   }
 }
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-basic/sample-po-search-basic.component.html b/projects/ui/src/lib/components/po-search/samples/sample-po-search-basic/sample-po-search-basic.component.html
new file mode 100644
index 0000000000..b1bba60709
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-basic/sample-po-search-basic.component.html
@@ -0,0 +1 @@
+<po-search></po-search>
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-basic/sample-po-search-basic.component.ts b/projects/ui/src/lib/components/po-search/samples/sample-po-search-basic/sample-po-search-basic.component.ts
new file mode 100644
index 0000000000..da5aa3d572
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-basic/sample-po-search-basic.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sample-po-search-basic',
+  templateUrl: './sample-po-search-basic.component.html'
+})
+export class SamplePoSearchBasicComponent {}
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.component.html b/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.component.html
new file mode 100644
index 0000000000..b03744e12b
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.component.html
@@ -0,0 +1,31 @@
+<div class="po-row">
+  <po-search
+    class="po-md-12"
+    name="Po Search"
+    [p-items]="items"
+    [p-filter-keys]="filterKeys"
+    (p-filtered-items-change)="filtered($event)"
+  ></po-search>
+</div>
+
+<hr />
+
+<div class="po-row" *ngFor="let people of peopleFiltered">
+  <po-info class="po-md-4" p-label="Name" [p-value]="people.name"> </po-info>
+
+  <po-info class="po-md-4" p-label="Nickname" [p-value]="people.nickname"> </po-info>
+
+  <po-info class="po-md-4" p-label="Email" [p-value]="people.email"> </po-info>
+</div>
+
+<hr />
+
+<po-list-view p-property-title="name" [p-items]="items">
+  <ng-template p-list-view-content-template let-item>
+    <li class="po-md-12">
+      Nickname: {{ item.nickname }}
+      <div *ngIf="compareObjects(item)"></div>
+    </li>
+    <li class="po-md-12">Email: {{ item.email }}</li>
+  </ng-template>
+</po-list-view>
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.component.ts b/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.component.ts
new file mode 100644
index 0000000000..43556b5d9a
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.component.ts
@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { SamplePoSearchFindPeopleService } from './sample-po-search-find-people.service';
+
+@Component({
+  selector: 'sample-po-search-find-people',
+  templateUrl: './sample-po-search-find-people.component.html',
+  styles: [
+    `
+      li {
+        list-style: none;
+        display: flex;
+        align-itens: center;
+      }
+    `,
+    `
+      li div {
+        width: 0.75em;
+        height: 0.75em;
+        border-radius: 50%;
+        background-color: green;
+        margin-left: 10px;
+      }
+    `
+  ],
+  providers: [SamplePoSearchFindPeopleService]
+})
+export class SamplePoSearchFindPeopleComponent implements OnInit {
+  items: any;
+  filterKeys: Array<string> = ['name', 'nickname', 'email'];
+  peopleFiltered: Array<any> = [];
+
+  constructor(private service: SamplePoSearchFindPeopleService) {}
+
+  ngOnInit() {
+    this.items = this.service.getItems();
+  }
+
+  filtered(event: Array<any>) {
+    this.peopleFiltered = event;
+    if (event.length === 4) {
+      this.peopleFiltered = [];
+    } else {
+      try {
+      } catch (error) {
+        return undefined;
+      }
+    }
+  }
+
+  compareObjects(value: any) {
+    return this.peopleFiltered.includes(value) ? true : false;
+  }
+}
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.service.ts b/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.service.ts
new file mode 100644
index 0000000000..8e246940e0
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-find-people/sample-po-search-find-people.service.ts
@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SamplePoSearchFindPeopleService {
+  getItems(): Array<any> {
+    return [
+      {
+        'id': '0348093615904',
+        'name': 'Leonardo Silveiras',
+        'birthdate': '1995-07-15T00:00:00-00:00',
+        'genre': 'male',
+        'city': '4209102',
+        'status': 'active',
+        'nickname': 'leo.silveira',
+        'email': 'leonardo.silveira@gmail.com',
+        'nationality': 'Brazilian',
+        'birthPlace': 'São Paulo',
+        'graduation': 'College',
+        'father': 'Papai',
+        'mother': 'Mamãe',
+        'street': 'Santos Dumont',
+        'country': 'Brasil',
+        'genreDescription': 'Masculino',
+        'statusDescription': 'Ativo',
+        'cityName': 'Joinville',
+        'state': 'Santa Catarina',
+        'uf': 'SC',
+        'dependents': []
+      },
+      {
+        'id': '0648093812893',
+        'name': 'João Severino',
+        'birthdate': '1995-10-07T00:00:00-00:00',
+        'genre': 'male',
+        'city': '4216206',
+        'status': 'active',
+        'nickname': 'jseverino',
+        'email': 'jseverino@yahoo.com',
+        'nationality': 'Brazilian',
+        'birthPlace': 'São Paulo',
+        'graduation': 'College',
+        'father': 'Papai',
+        'mother': 'Mamãe',
+        'street': 'Santos Dumont',
+        'country': 'Brasil',
+        'genreDescription': 'Masculino',
+        'statusDescription': 'Ativo',
+        'cityName': 'São Francisco do Sul',
+        'state': 'Santa Catarina',
+        'uf': 'SC',
+        'dependents': [{ 'id': 109481, 'name': 'Maria', 'age': '10', 'related': 'Daughter', 'birthdate': '2008-12-10' }]
+      },
+      {
+        'id': '0748093840433',
+        'name': 'José Marcos Cardoso',
+        'birthdate': '1986-08-01T00:00:00-00:00',
+        'genre': 'male',
+        'city': '4201307',
+        'status': 'inactive',
+        'nickname': 'jose',
+        'email': 'jose@outlook.com',
+        'nationality': 'Brazilian',
+        'birthPlace': '3550308',
+        'graduation': 'College',
+        'father': 'Papai',
+        'mother': 'Mamãe',
+        'street': 'Santos Dumont',
+        'country': 'Brasil',
+        'genreDescription': 'Masculino',
+        'statusDescription': 'Inativo',
+        'cityName': 'Araquari',
+        'state': 'Santa Catarina',
+        'uf': 'SC',
+        'dependents': [
+          { 'id': 109483, 'name': 'Pedro', 'age': '13', 'related': 'Son', 'birthdate': '2008-12-10' },
+          { 'id': 109484, 'name': 'Paulo', 'age': '15', 'related': 'Son', 'birthdate': '2008-12-10' },
+          { 'id': 109485, 'name': 'José', 'age': '19', 'related': 'Son', 'birthdate': '2008-12-10' }
+        ]
+      },
+      {
+        'id': '0848094890811',
+        'name': 'Karlo Rodrigues',
+        'birthdate': '1989-12-28T00:00:00-00:00',
+        'genre': 'male',
+        'city': '3550308',
+        'status': 'active',
+        'nickname': 'krodrigues',
+        'email': 'krodrigues@uol.com.br',
+        'nationality': 'Brazilian',
+        'birthPlace': 'São Paulo',
+        'graduation': 'College',
+        'father': 'Papai',
+        'mother': 'Mamãe',
+        'street': 'Santos Dumont',
+        'country': 'Brasil',
+        'genreDescription': 'Masculino',
+        'statusDescription': 'Ativo',
+        'cityName': 'São Paulo',
+        'state': 'São Paulo',
+        'uf': 'SP',
+        'dependents': []
+      }
+    ];
+  }
+}
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.html b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.html
new file mode 100644
index 0000000000..1ea45ba732
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.html
@@ -0,0 +1,113 @@
+<div class="po-row">
+  <po-search
+    #poSearch
+    class="po-md-12"
+    name="Po Search"
+    [p-icon]="icon"
+    [p-items]="items"
+    [p-disabled]="properties.includes('disabled')"
+    [p-filter-keys]="fieldKeys"
+    [p-literals]="customLiterals"
+    [p-filter-type]="filterMode"
+    (p-filtered-items-change)="filter($event)"
+    (p-change-model)="changeModel($event)"
+  ></po-search>
+</div>
+
+<hr />
+<div class="po-row">
+  <po-widget class="po-md-12">
+    <ul class="po-md-12 row">
+      <li *ngFor="let item of filteredItems">
+        <ng-container *ngFor="let key of changeFilter(item)">
+          <div>
+            <strong>{{ key }}: </strong> {{ item[key] }} &nbsp;
+          </div>
+        </ng-container>
+      </li>
+    </ul>
+  </po-widget>
+</div>
+<hr />
+
+<div class="po-row">
+  <po-info class="po-md-6" p-label="Model" [p-value]="search"> </po-info>
+
+  <po-info class="po-md-6" p-label="Events" [p-value]="event"> </po-info>
+</div>
+
+<hr />
+
+<!-- Properties -->
+<form #f="ngForm">
+  <div class="po-row">
+    <po-checkbox-group
+      class="po-md-12"
+      name="properties"
+      [(ngModel)]="properties"
+      p-label="Properties"
+      [p-options]="propertiesOptions"
+      (p-change)="propertiesChange($event)"
+    >
+    </po-checkbox-group>
+  </div>
+  <div class="po-row">
+    <po-input
+      class="po-md-6"
+      name="items"
+      [(ngModel)]="itemsModel"
+      p-label="Items"
+      p-help='Ex.: [ { "cidade": "São Paulo", "pais": "Brasil" }, { "cidade": "Rio de Janeiro", "pais": "Brasil" }, { "cidade": "Tóquio", "pais": "Japão" }]'
+      (p-change-model)="changeItems($event)"
+    >
+    </po-input>
+  </div>
+
+  <div class="po-row">
+    <po-input
+      class="po-md-6"
+      name="Filter Keys"
+      [(ngModel)]="filterModel"
+      p-label="Filter Keys"
+      p-help='Ex.: ["cidade", "pais"]'
+      (p-change-model)="updateFilterKeys($event)"
+    >
+    </po-input>
+
+    <po-input
+      class="po-md-6"
+      name="literals"
+      [(ngModel)]="literals"
+      p-help='Ex.: {"search": "Search people"}'
+      p-label="Literals"
+      (p-change)="changeLiterals()"
+    >
+    </po-input>
+
+    <po-radio-group
+      class="po-md-6 po-lg-4"
+      name="icon"
+      [(ngModel)]="icon"
+      p-columns="1"
+      p-label="Icon"
+      [p-options]="iconsOptions"
+    >
+    </po-radio-group>
+
+    <po-radio-group
+      class="po-md-6 po-lg-4"
+      name="filterMode"
+      [(ngModel)]="filterMode"
+      p-columns="1"
+      p-label="Filter Mode"
+      [p-options]="filterModeOptions"
+    >
+    </po-radio-group>
+  </div>
+
+  <hr />
+
+  <div class="po-row">
+    <po-button class="po-md-3" p-label="Sample Restore" (p-click)="restore()"> </po-button>
+  </div>
+</form>
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts
new file mode 100644
index 0000000000..f35b67ad91
--- /dev/null
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts
@@ -0,0 +1,168 @@
+import {
+  PoCheckboxGroupOption,
+  PoRadioGroupOption,
+  PoSearchComponent,
+  PoSearchFilterMode,
+  PoSearchLiterals
+} from '@po-ui/ng-components';
+import { Component, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'sample-po-search-labs',
+  templateUrl: './sample-po-search-labs.component.html',
+  styles: [
+    `
+      ul {
+        list-style: none;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 1rem;
+      }
+
+      ul strong {
+        text-transform: capitalize;
+      }
+    `
+  ]
+})
+export class SamplePoSearchLabsComponent implements OnInit, OnChanges {
+  @ViewChild('poSearch', { static: true }) PoSearch: PoSearchComponent;
+
+  customLiterals: PoSearchLiterals;
+  literals: any;
+  properties: Array<string>;
+  search: string;
+  event: string;
+  service: string = 'https://po-sample-api.onrender.com/v1/heroes';
+  items: Array<any> = [];
+  filteredItems: Array<any> = [];
+  fieldKeys: Array<any> = [];
+  tooltip: string;
+  icon: string;
+  filterMode: PoSearchFilterMode;
+  fieldKey: any;
+  itemsModel: any;
+  filterModel: any;
+
+  public readonly propertiesOptions: Array<PoCheckboxGroupOption> = [{ value: 'disabled', label: 'Disabled' }];
+
+  public readonly iconsOptions: Array<PoRadioGroupOption> = [
+    { label: 'fa-search', value: 'fa fa-search' },
+    { label: 'ph-magnifying-glass', value: 'ph ph-magnifying-glass' }
+  ];
+
+  public readonly filterModeOptions: Array<PoRadioGroupOption> = [
+    { label: 'Starts With', value: PoSearchFilterMode.startsWith },
+    { label: 'Contains', value: PoSearchFilterMode.contains },
+    { label: 'Ends With', value: PoSearchFilterMode.endsWith }
+  ];
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {
+    this.restore();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['items']) {
+      this.filteredItems = this.items;
+    }
+  }
+
+  changeFilter(item: any) {
+    return Object.keys(item);
+  }
+
+  onChangeService() {
+    this.http.get(this.service).subscribe((response: any) => {
+      const items = response.items;
+      if (items && items.length > 0) {
+        this.items = items;
+        this.filteredItems = items;
+        this.fieldKeys = ['name'];
+      }
+    });
+  }
+
+  updateFilterKeys(event: string) {
+    this.fieldKeys = this.convertToArray(event);
+  }
+
+  filter(event: Array<any>) {
+    this.filteredItems = event;
+
+    if (event.length === 0) {
+      this.event = 'p-change-model';
+      return;
+    }
+
+    this.event = 'p-filtered-items-change';
+  }
+
+  changeItems(items: any) {
+    try {
+      const new_items: Array<{}> = JSON.parse(items);
+
+      if (Array.isArray(new_items)) {
+        this.filteredItems = new_items;
+        this.items = new_items;
+      }
+    } catch (error) {}
+  }
+
+  propertiesChange(event) {
+    this.properties = event;
+  }
+
+  changeLiterals() {
+    try {
+      this.customLiterals = JSON.parse(this.literals);
+    } catch {
+      this.customLiterals = undefined;
+    }
+  }
+
+  changeModel(event: string) {
+    this.search = event;
+    if (this.event.length === 0) {
+      this.event = 'p-change-model';
+    }
+
+    if (event.length === 0) {
+      this.search = '';
+      this.event = '';
+    }
+  }
+
+  restore() {
+    this.search = '';
+    this.event = '';
+    this.icon = undefined;
+    this.customLiterals = undefined;
+    this.properties = [];
+    this.filteredItems = undefined;
+    this.items = undefined;
+    this.itemsModel = undefined;
+    this.filterModel = undefined;
+    this.fieldKeys = undefined;
+    this.filterMode = PoSearchFilterMode.startsWith;
+    this.literals = undefined;
+    this.cleanInput();
+    this.onChangeService();
+  }
+
+  cleanInput() {
+    try {
+      this.PoSearch.clearSearch();
+    } catch (error) {}
+  }
+
+  private convertToArray(value: string): Array<any> {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return undefined;
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/po-table/po-table-base.component.ts b/projects/ui/src/lib/components/po-table/po-table-base.component.ts
index 6fe2a8bb95..2df94b1abb 100644
--- a/projects/ui/src/lib/components/po-table/po-table-base.component.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-base.component.ts
@@ -6,7 +6,7 @@ import { poLocaleDefault } from '../../services/po-language/po-language.constant
 import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { capitalizeFirstLetter, convertToBoolean, isTypeof, sortValues } from '../../utils/util';
 
-import { PoFilterMode } from '../po-search/po-search-filter-mode.enum';
+import { PoSearchFilterMode } from '../po-search/enum/po-search-filter-mode.enum';
 import { PoTableColumnSortType } from './enums/po-table-column-sort-type.enum';
 import { PoTableColumnSpacing } from './enums/po-table-spacing.enum';
 import { PoTableAction } from './interfaces/po-table-action.interface';
@@ -309,7 +309,7 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
    *
    * @default `startsWith`
    */
-  @Input('p-filter-type') filterType: PoFilterMode = PoFilterMode.startsWith;
+  @Input('p-filter-type') filterType: PoSearchFilterMode = PoSearchFilterMode.startsWith;
 
   /**
    * @optional
diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts
index b4eab82594..3572f16e32 100644
--- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts
+++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.ts
@@ -8,7 +8,7 @@ import {
   PoTableColumn,
   PoTableColumnSpacing,
   PoTableLiterals,
-  PoFilterMode
+  PoSearchFilterMode
 } from '@po-ui/ng-components';
 
 import { SamplePoTableLabsService } from './sample-po-table-labs.service';
@@ -45,7 +45,7 @@ export class SamplePoTableLabsComponent implements OnInit {
   properties: Array<string> = ['hideBatchActions', 'hideTableSearch'];
   selection: Array<string>;
   spacing: PoTableColumnSpacing = PoTableColumnSpacing.Medium;
-  filterType: PoFilterMode = PoFilterMode.startsWith;
+  filterType: PoSearchFilterMode = PoSearchFilterMode.startsWith;
   filteredColumns: Array<string> = [];
 
   actionsDefinitionOptions: Array<PoCheckboxGroupOption> = [
@@ -62,9 +62,9 @@ export class SamplePoTableLabsComponent implements OnInit {
   ];
 
   public readonly filterModeOptions: Array<PoRadioGroupOption> = [
-    { label: 'Starts With', value: PoFilterMode.startsWith },
-    { label: 'Contains', value: PoFilterMode.contains },
-    { label: 'Ends With', value: PoFilterMode.endsWith }
+    { label: 'Starts With', value: PoSearchFilterMode.startsWith },
+    { label: 'Contains', value: PoSearchFilterMode.contains },
+    { label: 'Ends With', value: PoSearchFilterMode.endsWith }
   ];
 
   public readonly columnsOptions: Array<PoCheckboxGroupOption> = [