# Search Use `ui-search` for filtering lists, querying content, and compact toolbar search patterns. It inherits the shared field API for labels, help text, size, variant, readonly, disabled, and validation messaging while keeping the behavior aligned with native search inputs. ## Import ```ts import { SearchComponent } from 'ui'; ``` ## Basic search fields ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SearchComponent } from 'ui'; @Component({ selector: 'app-search-basic-demo', standalone: true, imports: [FormsModule, SearchComponent], template: `

Global search

Good default for workspace-wide queries, command bars, or header search.

Search with value

Shows the built-in clear affordance when the field already contains a query.

`, }) export class SearchBasicDemoComponent { protected query = 'Quarterly planning'; } ``` ## Layout, size, and variant ```ts import { Component } from '@angular/core'; import { SearchComponent } from 'ui'; @Component({ selector: 'app-search-layout-demo', standalone: true, imports: [SearchComponent], template: `

Primary content search

`, }) export class SearchLayoutDemoComponent {} ``` ## Readonly, disabled, and inline error states ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SearchComponent } from 'ui'; @Component({ selector: 'app-search-states-demo', standalone: true, imports: [FormsModule, SearchComponent], template: `

`, }) export class SearchStatesDemoComponent { protected readonlyValue = 'Archived incidents'; protected shortQuery = 'ab'; protected get shortQueryError(): string { if (!this.shortQuery) { return ''; } return this.shortQuery.trim().length < 3 ? 'Enter at least 3 characters.' : ''; } } ``` ## Validation with reactive forms ```ts import { Component } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { ButtonComponent, SearchComponent } from 'ui'; @Component({ selector: 'app-search-validation-demo', standalone: true, imports: [ButtonComponent, ReactiveFormsModule, SearchComponent], template: `

Validate

Use example

`, }) export class SearchValidationDemoComponent { protected readonly searchForm = new FormGroup({ query: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.minLength(3)], }), }); protected get queryError(): string { const control = this.searchForm.controls.query; if (!control.touched && !control.dirty) { return ''; } if (control.hasError('required')) { return 'Search query is required.'; } if (control.hasError('minlength')) { return 'Enter at least 3 characters.'; } return ''; } protected markTouched(): void { this.searchForm.markAllAsTouched(); } protected fillExample(): void { this.searchForm.controls.query.setValue('remote work policy'); this.searchForm.controls.query.markAsTouched(); } } ``` ## Filter bar composition ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, SearchComponent } from 'ui'; @Component({ selector: 'app-search-filter-bar-demo', standalone: true, imports: [ButtonComponent, FormsModule, SearchComponent], template: `

Issues filter bar

Search often lives beside quick filters and reset actions, not as a standalone input.

Open only

Assigned to me

Reset

Active query

`, }) export class SearchFilterBarDemoComponent { protected searchQuery = 'drawer animation'; protected clearFilters(): void { this.searchQuery = ''; } } ``` ## Results panel composition ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, SearchComponent } from 'ui'; type SearchResult = { title: string; meta: string; }; @Component({ selector: 'app-search-results-panel-demo', standalone: true, imports: [ButtonComponent, FormsModule, SearchComponent], template: `

Workspace search panel

A realistic search surface includes the query field, lightweight result count, and a compact list of matching entities.

{{ filteredResults.length }} result{{ filteredResults.length === 1 ? '' : 's' }}

Clear query

@for (result of filteredResults; track result.title) {

}

`, }) export class SearchResultsPanelDemoComponent { protected query = 'release'; private readonly results: SearchResult[] = [ { title: 'Release handoff checklist', meta: 'Document | Updated 2 hours ago' }, { title: 'Q3 release plan', meta: 'Project | Owned by Nina Woods' }, { title: 'Release notes template', meta: 'Template | Shared with Product Ops' }, { title: 'Design review board', meta: 'Channel | Last active yesterday' }, ]; protected get filteredResults(): SearchResult[] { const query = this.query.trim().toLowerCase(); if (!query) { return this.results; } return this.results.filter(result => `${result.title} ${result.meta}`.toLowerCase().includes(query), ); } } ``` ## Accessibility ### Label and name Prefer a visible `label` so the search scope is explicit, especially when several search fields can appear in the same product. Help and error text contribute through `aria-describedby`. ### Keyboard and actions This is a standard text-entry field backed by a native `type="search"` input. Search and clear are exposed as separate actions in the field chrome when the field is editable. | Aspect | Behavior | | --- | --- | | focus | native search input receives focus | | typing | native search input behavior | | clear action | appears only when the field has a value and is editable | | search action | stays visible while editable to reinforce the field purpose | | readonly / disabled | actions are hidden and direct editing is blocked | ### Autocomplete and semantics The inner input uses `type="search"` and falls back to `autocomplete="off"` unless you override it. Use explicit autocomplete values only when the search query should participate in browser-assisted history or form completion.