Search Input
A search field styled like InputGroup, meant to sit inline among other form fields rather than standing alone as a pill.
SearchInput reuses InputGroup's visual system (icon slots, border/focus/disabled states) and
adds only a clear (×) button — no send button, no pill shape. For a self-contained search field with its own
submit control, see SearchBar instead.
Minimal example
import { Component, signal } from "@angular/core";
import { SearchInputComponent, InputComponent, InputControlDirective } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [SearchInputComponent, InputComponent, InputControlDirective],
template: `
<form class="flex flex-col gap-4">
<input-group>
<input input-control type="text" placeholder="First name" />
</input-group>
<SearchInput [(value)]="query" placeholder="Search documents…" />
</form>
`,
})
export class SampleComponent {
query = signal("");
}With suggestions
Without suggestions, SearchInput is a native search field. To show a list of suggestions under it, add the static
suggestions attribute and import SearchInputSuggestionsComponent instead: its inner <input> then carries
ngCombobox, so assistive technology announces a combobox only when there is a popup to go with it. The popup is yours:
an ng-template bound to the combobox the component exposes through combobox().
import { ComboboxPopup, ComboboxWidget } from "@angular/aria/combobox";
import { Listbox, Option } from "@angular/aria/listbox";
import { Component, computed, signal } from "@angular/core";
import { SearchInputSuggestionsComponent } from "@sinequa/galactik";
const FRUITS = ["Apple", "Apricot", "Banana", "Cherry"];
@Component({
selector: "sample-component",
imports: [SearchInputSuggestionsComponent, ComboboxPopup, ComboboxWidget, Listbox, Option],
template: `
<SearchInput suggestions #si aria-label="Fruit" [(value)]="query" />
<ng-template ngComboboxPopup [combobox]="si.combobox()">
<ul
ngComboboxWidget
ngListbox
#lb="ngListbox"
focusMode="activedescendant"
selectionMode="explicit"
[activeDescendant]="lb.activeDescendant()"
(valueChange)="pick($event)">
@for (fruit of matches(); track fruit) {
<li ngOption [value]="fruit">{{ fruit }}</li>
}
</ul>
</ng-template>
`,
})
export class SampleComponent {
query = signal("");
matches = computed(() => FRUITS.filter(fruit => fruit.toLowerCase().includes(this.query().toLowerCase())));
pick(values: readonly string[]) {
const picked = values.at(-1);
if (picked) this.query.set(picked);
}
}The suggestions attribute is a choice made once, when the field is created: it cannot be bound or toggled afterwards.
SearchBar works the same way (SearchBarSuggestionsComponent).
Options
Prop
Type
Pitfalls
What's next
Textarea
A native textarea wrapped like Input, with three height strategies and a rows-independent min/max bound for content-driven auto-sizing.
Search Bar
A self-contained, pill-shaped search field with a leading icon and built-in clear/send controls, meant to stand on its own rather than inside a form.