LegnoSearch

Example 1 - Default

<legno-form-container>
  <legno-search placeholder="Search" />
</legno-form-container>

<div class="legno-search">
  <input type="text" autocomplete="on" class="legno-search__input" placeholder="Search" />
  <div class="legno-search__icon legno-icon-wrapper">
    <!-- svg icon: legno-icon-search-filled -->
  </div>
</div>

Example 2 - Autocomplete

• Banana
• Apple
• Orange

<legno-form-container>
  <legno-search placeholder="Search" :autocomplete-suggestions="['Banana','Apple','Orange']" />
</legno-form-container>

<div class="legno-search">
  <input type="text" autocomplete="on" class="legno-search__input" placeholder="Search" />
  <div class="legno-search__icon legno-icon-wrapper">
    <!-- svg icon: legno-icon-search-filled -->
  </div>
 <ul class="legno-search__autocomplete-container">
    <li class="legno-search__autocomplete-suggestion">Banana</li>
    <li class="legno-search__autocomplete-suggestion">Apple</li>
    <li class="legno-search__autocomplete-suggestion">Orange</li>
</ul>
</div>

Slots

...

Props

...