Search

Code

<!-- Basic search box -->
<div class="cui search-box">
    <label for="search-field" class="hidden">Search</label>
    <input id="search-field" class="search-box-input" type="search">
    <button class="cui search-box-btn btn-md icon-only primary">
        <span class="cicon-search"></span>
        <span class="sr-only">Submit search</span>
    </button>
</div>


<!-- Search box with mobile modal -->
<!-- Mobile Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
    <label for="search-field" class="hidden">Search</label>
    <input id="search-field" class="search-box-input" type="search">
    <button class="cui search-box-btn btn-md icon-only primary">
        <span class="cicon-search"></span>
        <span class="sr-only">Submit search</span>
    </button>
</div>

<!-- Mobile Part 2. Fake search-box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
    <div class="search-box-input"></div>
    <div class="cui search-box-btn btn-md icon-only primary">
        <span class="cicon-search"></span>
        <span class="sr-only">Submit search</span>
    </div>
</a>

<!-- Mobile Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search" class="cui modal-window modal-window-search">
    <div class="modal-window-header">
        <a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
    </div>
    <div class="modal-window-body">
        <div class="cui search-box">
            <label for="search-field-modal" class="hidden">Search</label>
            <input id="search-field-modal" class="search-box-input" type="search">
            <button class="cui search-box-btn btn-md icon-only primary">
                <span class="cicon-search"></span>
                <span class="sr-only">Submit search</span>
            </button>
        </div>
    </div>
</div>

Usage

Search box with mobile modal

This variant has a different experience for smaller mobile screens (576px or less wide). For the smaller screens, a fake search box is displayed. When tapping this fake search box, a modal will open up with the real search box field.

Resize your window to see this in action.

Code

<label for="search-field-3" class="form-control-label cui">Search</label>
<div class="input-group cui">
    <input id="search-field-3" type="search" class="form-control sub-search-autocomplete cui" placeholder="Search for...">
    <span class="input-group-btn cui">
        <button class="cui btn-md primary">Go</button>
    </span>
</div>

Accessibility

This sub search pattern can be used for page-level search. There is no set width applied to the component. To limit the size, you can either place the component inside of a grid, or apply the .set-max-width class to a wrapping element.