Search Field Stable

The Search Field is an input that initiates a search on submission.

<div class="js-search-field search-field textfield textfield--with-prefix ">
    <i class="textfield__prefix icon-search"></i>
    <input name="search" type="search" class="textfield__input search-field__input" spellcheck="false" autocomplete="off" placeholder="Search…"/>
</div>

Default

spread to full-width by adding the class `.textfield--large`

Adding a auto-completion options

<div class="js-search-field search-field textfield textfield--with-prefix search-field textfield--large has-results">
    <i class="textfield__prefix icon-search"></i>
    <input name="search" type="search" class="textfield__input search-field__input" spellcheck="false" autocomplete="off" placeholder="Search…"/>
    <div class="menu search-field__autocomplete">
        <div class="menu__item">Menu Item 1</div>
        <div class="menu__item">Menu Item 2</div>
        <div class="menu__item">Menu Item 3</div>
        <div class="menu__item">Menu Item 4</div>
        <div class="menu__item">Menu Item 5</div>
    </div>
</div>