Typeahead

Link to Figma View all renders

Default Typeahead

Default typeahead with a label and a placeholder. 

<div class="typeahead input-field">
    <label for="input">label</label>
    <div class="input-field__input">
        <div class="typeahead__input">
            <input class="text-input" id="input" name="input" type="text" />
        </div>
    </div>
</div>

Typing Typeahead

Typing typeahead with a label, a placeholder, and a list of options. 

<div class="typeahead input-field">
    <label for="input">label</label>
    <div class="input-field__input">
        <div class="typeahead__input typeahead__input--filled">
            <span class="typeahead__value">
              Option 3
            </span>
            <input class="text-input" id="input" name="input" type="text" autocomplete="off" aria-controls="suggestion-list" />
            <button class="btn btn--text btn--clear" type="button" aria-label="Clear">
                 <span class="material-symbols-rounded" aria-hidden="true">close</span>
            </button>
        </div>
        <ul id="suggestion-list" class="typeahead__list" dir="ltr" role="listbox">
            <li class="typeahead__item" role="option">Option 1</li>
            <li class="typeahead__item" role="option">Option 2</li>
            <li class="typeahead__item typeahead__item--highlighted" role="option">Option 3</li>
            <li class="typeahead__item" role="option">Option 4</li>
            <li class="typeahead__item" role="option">Option 5</li>
            <li class="typeahead__item" role="option">Option 6</li>
        </ul>
    </div>
</div>

Filled Typeahead

Filled typeahead with a label, a placeholder, and a selected option. 

<div class="typeahead input-field">
    <label for="input">label</label>
    <div class="input-field__input">
        <div class="typeahead__input typeahead__input--filled">
            <span class="typeahead__value">
              Option 3
            </span>
            <input class="text-input" id="input" name="input" type="text" />
            <button class="btn btn--text btn--clear" type="button" aria-label="Clear">
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </button>
        </div>
    </div>
</div>

Variations and modifiers

Typeahead with empty state

Typeahead with a label and a message when no matches are found. 

<div class="typeahead input-field">
    <label for="input">label</label>
    <div class="input-field__input">
        <div class="typeahead__input typeahead__input--filled">
            <span class="typeahead__value">
              Option Test
            </span>
            <input class="text-input" id="input" name="input" type="text" aria-controls="empty-list" />
            <button class="btn btn--text btn--clear" type="button" aria-label="Clear">
                <span class="material-symbols-rounded" aria-hidden="true">
                    close
                </span>
            </button>
        </div>
        <ul id="empty-list" class="typeahead__list" dir="ltr" role="listbox">
            <li class="typeahead__item typeahead__item--empty" role="option">
                No matches found please try another description
            </li>
        </ul>
    </div>
</div>

Typeahead with hint and help text

Typeahead with a label, a hint, and a help text. 

<div class="typeahead input-field">
    <label for="input-value">label</label>
    <div id="input-hint-text" class="input-field__hint">hint text</div>
    <div class="input-field__input">
        <div class="typeahead__input">
            <input class="text-input" id="input-value" name="input" value="Option 1" type="text" />
            <button class="btn btn--text btn--clear">
                <span class="material-symbols-rounded" aria-hidden="true">close</span>
            </button>
        </div>
    </div>
    <div id="input-help-text" class="input-field__help">help text</div>
</div>

Typeahead with error state on validation message

Typeahead with a label and an error state on validation message. 

<div class="typeahead input-field">
    <label for="input-error">label</label>
    <div class="input-field__input">
        <div class="typeahead__input">
            <input class="text-input error" id="input-error" name="input" type="text" aria-invalid="false" aria-errormessage="input-validation-selected-error" required />
        </div>
    </div>
    <div id="input-validation-selected-error" class="input-field__validation">validation message</div>
</div>