SiSearchBarComponent documentation¶

selector

si-search-bar

Input Properties¶

Name	Type	Default	Description
clearButtonAriaLabel ¶	`TranslatableString`	$localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:Clear`	Aria label for the clear button.
colorVariant ¶	`BackgroundColorVariant`	`'base-1'`	Color to use for component background
showIcon ¶	`boolean`	`false`	Display search icon before search input.
debounceTime ¶	`number`	`400`	Time unit change of search input takes effect. Deprecated: Use a content-projected input and debounce its form value changes in application code, for example with RxJS `debounceTime` on `FormControl.valueChanges` : `<si-search-bar> <input siSearchBarInput [formControl]="searchControl"> </si-search-bar>` `typescript searchControl.valueChanges.pipe(debounceTime(400));`
disabled ¶	`boolean`	`false`	Whether the input is disabled. Deprecated: Use a content-projected input with `disabled` applied directly to it: `<si-search-bar> <input siSearchBarInput disabled> </si-search-bar>`
maxlength ¶	`number`	`undefined`	Defines the maximum length of the search input. Deprecated: Use a content-projected input with `maxlength` applied directly to it: `<si-search-bar> <input siSearchBarInput maxlength="100"> </si-search-bar>`
placeholder ¶	`string`	`''`	Define search input placeholder. Deprecated: Use a content-projected input with `placeholder` applied directly to it: `<si-search-bar> <input siSearchBarInput placeholder="Search"> </si-search-bar>`
prohibitedCharacters ¶	`string`		Prohibited characters restricting search. Deprecated: Use a reactive `FormControl` or Signal Forms on a content-projected input to validate prohibited characters: `<si-search-bar> <input siSearchBarInput [formControl]="searchControl"> </si-search-bar>` Or with Signal Forms: `<si-search-bar> <input siSearchBarInput [formField]="searchForm.search"> </si-search-bar>`
readonly ¶	`boolean`	`false`	Whether the input can be focused but not edited. Deprecated: Use a content-projected input with `readonly` applied directly to it: `<si-search-bar> <input siSearchBarInput readonly> </si-search-bar>`
value ¶	`string`		Define search input content. Deprecated: Use a content-projected input with `value` applied directly to it: `<si-search-bar> <input siSearchBarInput value="Search term"> </si-search-bar>`

Output Properties¶

Name	Type	Description
searchChange ¶	`string`	Output callback event will provide you with search term if search input changes. Deprecated: Use a content-projected input and observe `FormControl.valueChanges` or the field value signal with Signal Forms: `<si-search-bar> <input siSearchBarInput [formControl]="searchControl"> </si-search-bar>` Or with Signal Forms: `<si-search-bar> <input siSearchBarInput [formField]="searchForm.search"> </si-search-bar>`

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

BackgroundColorVariant (`"base-1"` \| `"base-0"`)¶ Type alias Use this type with filter components `colorVariant` to render component variants based on background of container

Except where otherwise noted, content on this site is licensed under MIT License.