Skip to content
STYLESCAPE

Search bar

Examples for the ss-c-search-bar module: a search field with a leading magnifier and an attached button, in a <form role="search">. For a row of list filters see ss-c-filter-bar.

Default

HTML 
<form class="ss-c-search-bar" role="search" action="#">
            <label for="search-q" class="ss-u-visually-hidden">Search projects</label>
            <input id="search-q" name="q" type="search" class="ss-c-search-bar__input" placeholder="Search projects">
            <button type="submit" class="ss-c-button ss-c-search-bar__button">Search</button>
        </form>

Sizes, without button

HTML 
<div style="display: grid; gap: 12px">
            <form class="ss-c-search-bar ss-c-search-bar--sm" role="search" action="#">
                <label for="search-sm" class="ss-u-visually-hidden">Search tokens</label>
                <input id="search-sm" name="q" type="search" class="ss-c-search-bar__input" placeholder="Search tokens">
            </form>
            <form class="ss-c-search-bar ss-c-search-bar--lg ss-c-search-bar--full" role="search" action="#">
                <label for="search-lg" class="ss-u-visually-hidden">Search the documentation</label>
                <input id="search-lg" name="q" type="search" class="ss-c-search-bar__input" value="segmented">
                <button type="submit" class="ss-c-button ss-c-button--lg ss-c-search-bar__button">Search</button>
            </form>
        </div>