ShellBarSearch

<ui5-shellbar-search> | Since 2.10.0

info

The following entity is available under an experimental flag and its API and behavior are subject to change.

Search field for the ShellBar component.

Properties

autoOpen

Description	Indicates whether the suggestions popover should be opened on focus.
Type	boolean
Default	false

accessibleDescription

Description	Defines the accessible ARIA description of the field.
Type	string | undefined
Default	undefined

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined

fieldLoading

Description	Indicates whether a loading indicator should be shown in the input field.
Type	boolean
Default	false
Since	2.19.0

loading

Description	Indicates whether a loading indicator should be shown in the popup.
Type	boolean
Default	false

noTypeahead

Description	Defines whether the value will be autcompleted to match an item.
Type	boolean
Default	false

open

Description	Indicates whether the items picker is open.
Type	boolean
Default	false

placeholder

Description	Defines a short hint intended to aid the user with data entry when the component has no value. Note: When scopes are defined and no custom placeholder is provided, the placeholder automatically displays "Search in: {selected scope name}". Setting a custom placeholder will override this automatic behavior.
Type	string | undefined
Default	undefined

scopeValue

Description	Defines the value of the component: Applications are responsible for setting the correct scope value. Note: If the given value does not match any existing scopes, no scope will be selected and the SearchField scope component will be displayed as empty.
Type	string | undefined
Default	""
Since	2.18.0

showClearIcon

Description	Defines whether the clear icon of the search will be shown.
Type	boolean
Default	false

value

Description	Defines the value of the component. Note: The property is updated upon typing.
Type	string
Default	""

Slots

action

Description	Defines the popup footer action button.
Type	Array<Button>

default

Description	Defines the Search suggestion items.
Type	Array<SearchItem | SearchItemGroup>

filterButton

Description	Defines the filter button slot, used to display an additional filtering button. This slot is intended for passing a ui5-button with a filter icon to provide extended filtering options. Note: Scope button and Filter button are mutually exclusive.
Type	Array<Button>
Since	2.11.0

illustration

Description	Defines the illustrated message to be shown in the popup.
Type	Array<IllustratedMessage>

messageArea

Description	Defines the illustrated message to be shown in the popup.
Type	Array<SearchMessageArea>

scopes

Description	Defines the component scope options.
Type	Array<ISearchScope>

Events

close

Description	Fired when the popup is closed.
Type	CustomEvent
Bubbles	No
Cancelable	No

input

Description	Fired when typing in input or clear icon is pressed.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

open

Description	Fired when the popup is opened.
Type	CustomEvent
Bubbles	No
Cancelable	No

scope-change

Description	Fired when the scope has changed.
Type	CustomEvent<SearchFieldScopeSelectionChangeDetails>
Parameters	scope: HTMLElement The newly selected scope
Bubbles	Yes
Cancelable	No

search

Description	Fired when the user has triggered search with Enter key or Search Button press.
Type	CustomEvent
Bubbles	Yes
Cancelable	Yes - via preventDefault()

Methods

No methods available for this component.

CSS Parts

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

Name	Description
popover	Used to style the suggestions popup

CSS Custom States

No CSS custom states available for this component.