Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Filters
  • Gallery card
  • Indicators
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toast
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Tabs
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

Typeahead

Typeahead helps customers find teammates and reduce the likelihood of errors.

Harry Potter
Expand Copy
<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>

Description

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.