Brio

Search Forms

Icon prefix and submit button inside an input-group.

<docs-resize>
    <form role="search" class="input-group">
        <span class="input-addon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.3-4.3"></path>
            </svg>
        </span>
        <input type="search" class="input" name="q" placeholder="Search..." autocomplete="off"/>
        <button class="button" type="submit">Search</button>
    </form>
</docs-resize>

Search with filters

Search input above a row of filter controls and a clear action.

<docs-resize>
    <form role="search" class="stack is-tight">
        <div class="input-group">
            <span class="input-addon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </svg>
            </span>
            <input type="search" class="input" name="q" placeholder="Search products..." autocomplete="off"/>
        </div>
        <div class="cluster is-tight">
            <label class="cluster is-tight text--1">
                <span>Category</span>
                <select class="input is-sm" name="category">
                    <option>All</option>
                    <option>Electronics</option>
                    <option>Books</option>
                    <option>Home</option>
                </select>
            </label>
            <label class="cluster is-tight text--1">
                <span>Sort by</span>
                <select class="input is-sm" name="sort">
                    <option>Most relevant</option>
                    <option>Newest</option>
                    <option>Price: low to high</option>
                    <option>Price: high to low</option>
                </select>
            </label>
            <button class="button is-ghost is-sm" type="reset">Clear filters</button>
        </div>
    </form>
</docs-resize>

Results header

Inline search with result count and sort control in a single row.

42 results

 
<docs-resize>
    <div class="cluster is-tight" style="align-items: center;">
        <form role="search" class="input-group" style="flex: 1;">
            <span class="input-addon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </svg>
            </span>
            <input type="search" class="input" name="q" placeholder="Filter results..." autocomplete="off"/>
        </form>
        <p class="text-muted text--1"><strong>42</strong> results</p>
        <label class="cluster is-tight text--1">
            <span>Sort</span>
            <select class="input is-sm" name="sort">
                <option>Newest</option>
                <option>Oldest</option>
                <option>A-Z</option>
            </select>
        </label>
    </div>
</docs-resize>

Patterns