Search bar

See the readme on Githubopen_in_new

This page outlines some basic pattern and usage guidance. Following these guidelines helps give your users a consistent experience across apps.

Patterns

MyUW Web Components features a bespoke implementation of search that is based on prior/existing MyUW functionality. We intend to change this model over time to better reflect Material Design patternsopen_in_new.
    Do
  • Use the search bar for app-wide search
  • Set the input-label to give users more context about what exactly the input can search for
    • Don't
  • Make the search behave differently on different pages within the same app (i.e. Searches should always be app-wide)

    For example: Say you have a directory of apps and a directory of people, with separate pages for each. The search bar in the top app bar should always search against both (regardless of which page the user is currently viewing) and contextualize the results on the "search results" page.

    • Note: The myuw-search component is best used in apps with very generic, simple searchable information (where there's no need for complicated search parameters).

How to use

Refer to the readmeopen_in_new for detailed information.


<myuw-search
  input-label=""
  button-label=""
  icon=""
  slot="myuw-search">
</myuw-search>

Attributes

  • input-label: Text to use in the aria-label and placeholder of the search field
  • button-label: Text to use for the aria-label of the search button
  • icon: Material icon for the search button (defaults to "search" spyglass)

Custom Event

Upon clicking the submit button (or pressing the "Enter" key when focusing the search field), the myuw-search component dispatches a custom event called "myuw-search". React to searches by listening for this event. 


document.body.addEventListener('myuw-search', (event) => {
  var valueFromSearchBar = event.detail.value // "detail" object is part of CustomEvent spec
  /*
    Perform search logic here. For example:
      - Pass the search value as a parameter to your app's search page
  */
}, false );

Customizable CSS


myuw-search {
  --myuw-search-border: none; /* Set border (useful for themes with light background colors) */
  --myuw-app-bar-color: #fff; /* Set color of search bar icon on small screens */
}