Typeahead helps customers find teammates and reduce the likelihood of errors.
<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>
Typeahead is useful to help guide customers to select an item from a known list. Used commonly with Tags.