Skip to content

SiSearchBarComponent documentation

selector
si-search-bar

Input Properties

NameTypeDefaultDescription
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
debounceTime
number400Time unit change of search input takes effect.
disabled
booleanfalse
placeholder
string''Define search input placeholder.
prohibitedCharacters
stringProhibited characters restricting search.
readonly
booleanfalse
showIcon
booleanfalseDisplay search icon before search input.
tabbable
booleantrueWhether the search is tabbable or not.
value
stringDefine search input content.

Output Properties

NameTypeDescription
searchChange
stringOutput callback event will provide you with search term if search input changes.

Types Documentation

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.
Use this type with filter components colorVariant to render component variants based on background of container
Translatable
import

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