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)
<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>
