Zywave, Inc.Zywave, Inc.Zywave, Inc.Zywave, Inc.
Stable

Search

Defines a consistent search bar interface.

<zui-search placeholder="Search for content..."></zui-search>

Search with no submit button

<zui-search placeholder="Search for content..." no-submit></zui-search>

<zui-search placeholder="Search for content..." autofocus></zui-search>

<zui-search placeholder="Search for content..." disabled></zui-search>

Override search colors

<style>
  .zui-search-demo-override-submit-color {
    --zui-search-border-color: #deaaff;
    --zui-search-submit-color: #c0fdff;
    --zui-search-submit-background-color: #deaaff;
    --zui-search-submit-hover-color: #c8e7ff;
    --zui-search-submit-hover-background-color: #e2afff;
  }
</style>
<zui-search placeholder="Search for content..." class="zui-search-demo-override-submit-color"></zui-search>

Search with dropdown list

Content Content Groups Custom Element 
<zui-search placeholder="Search for content...">
  <zui-select>
    <zui-option value="1">Content</zui-option>
    <zui-option value="2">Content Groups</zui-option>
    <zui-option value="3">Custom Element</zui-option>
  </zui-select>
</zui-search>

Search with dropdown list and no submit button

Content Content Groups Custom Element 
<zui-search placeholder="Search for content..." no-submit>
  <zui-select>
    <zui-option value="1">Content</zui-option>
    <zui-option value="2">Content Groups</zui-option>
    <zui-option value="3">Custom Element</zui-option>
  </zui-select>
</zui-search>