The search component allows the user to filter data based on a query. There are two variants: a basic component for simple filtering, and a "search and find" variant which has buttons to browse the results, displays which result is currently highlighted ("x of y results") and provides a "jump to result" link for keyboard users.

The component does not handle the data to filter. It simply gives you the text typed by the user through the value property, which is typically retrieved via the "input" event (e.g. inside the callback function). Use the num-results property to pass the number of results back to the component.

In the "search and find variant", the user browses the results using the component's arrow buttons, which emit the event wmSearchBrowseResults. In the callback function, use event.detail.position to retrieve the position of the result in the list, and set the highlighted-id and highlighted-name properties to the current search result (for accessibility reasons).


* Required property

basic | find
Variant of the component. Defaults to basic
highlighted-id *
Required for the search and find variant only. id of the item currently hightlighted.
highlighted-name *
Required for the search and find variant only. Text of the item currently highlighted.
label *
The component's label (for accessibility). It may be the same as the placeholder.
num-results *
The number of results yielded by the user's query.
placeholder *
The placeholder text displayed in the input when it is empty.
The input's value (text typed by the user), for access by the app.
  • Alice
  • Alfred
  • Annie
  • Arnold
  • Bob
  • John
  • Mary

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.

Emitted when the buttons in the search-and-find variant are pressed. The event detail contains a 'position' key representing the order of the item currently highlighted.
Emitted on blur when Search's value changes.
Emitted when a user types in the input field.


Screen readers announce the number of results

When using the "search and find" version, if there are results and the user is tabbing, the component displays a link to jump to the search result (similar to a "skip navigation" link).

The component doesn't handle the results list; the filtering needs to be implemented, using the information exposed by the component through properties and events. Similarly, in the "search and find" variant, the highlighting needs to be handled outside of the component (for the same reason: the component doesn't have access to the results list).

The component emits an event on "input", not on "change". Make sure the callback function is hooked to the proper event.