No Results Found
Typeahead helps customers find teammates and reduce the likelihood of errors.
<div class="typeahead form-input form-input--focused">
<tk-tag
aria-label="Remove person"
class="mr-3x"
is-removeable="true"
size="small"
>Harry Potter
</tk-tag>
<div class="l-inline l-relative">
<input type="text"
class="typeahead__input"
value="He"
aria-label="Filter people"
placeholder="Name or email">
<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>
</div>
</div>
Typeahead is useful to help guide customers to select an item from a known list. Used commonly with Tags. This has not been converted to a Toolkit web component yet. The Toolkit only provides the styling based on the CSS class names. However, a resuable Typeahead component is available in certain parts of the product. Reach out for more details.