Typeahead

<ut-typeahead>
  <div class="typeahead form-input form-input--focused">
    <ut-typeahead-tags>
      <button type="button"
        class="btn tag tag--person tag--xs mr-3x">
        Harry Potter
        <span aria-label="Remove person">×</span>
      </button>
    </ut-typeahead-tags>

    <div class="typeahead__input-wrapper">
      <ut-typeahead-input>
        <input type="text"
          class="typeahead__input"
          value="He"
          aria-label="Filter people"
          placeholder="Name or email">
      </ut-typeahead-input>

      <ut-typeahead-results>
        <div class="typeahead__results mt-2x">
          <div class="typeahead__wrap">
            <ul class="typeahead__list">

              <li class="typeahead__item">
                <button type="button"
                  class="typeahead__option">
                  <span class="typeahead__selectable"><strong>He</strong>rmione Granger</span>
                  <span class="typeahead__selectable">hermione@hogwarts.com</span>
                </button>
              </li>

              <li class="typeahead__item">
                <button type="button"
                  class="typeahead__option">
                  <span class="typeahead__selectable"><strong>He</strong>dwig Owl</span>
                  <span class="typeahead__selectable">hedwig@hogwarts.com</span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </ut-typeahead-results>
    </div>
  </div>
</ut-typeahead>