Search

Search field with a clear icon that is shown when the user has entered text. The component does not provide borders to be more flexible. If you want borders, use for example the following colors:

  • Default - fade(@greyscale-0, 10) or rgba(0, 0, 0, 0.1)
  • Inverse - fade(@greyscale-100, 15) or rgba(255, 255, 255, 0.15)

  • Default
  • Inverse
<div class="lui-search">
  <span class="lui-icon  lui-icon--search  lui-search__search-icon"></span>
  <input class="lui-search__input" maxlength="255" spellcheck="false" type="text" placeholder="Search"/>
  <button class="lui-search__clear-button">
    <span class="lui-icon  lui-icon--small  lui-icon--close"></span>
  </button>
</div>
<div class="lui-search  lui-search--inverse">
  <span class="lui-icon  lui-icon--search  lui-search__search-icon"></span>
  <input class="lui-search__input" maxlength="255" spellcheck="false" type="text" placeholder="Search"/>
  <button class="lui-search__clear-button">
    <span class="lui-icon  lui-icon--small  lui-icon--close"></span>
  </button>
</div>