Search

Basic search box

<!-- Search box -->
<div class="cui search-box">
    <label for="search-field" class="sr-only">Search</label>
    <input id="search-field" class="form-control 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

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

This variant was designed to allow the user to focus on their search task on a mobile device. By opening the real search box in the modal, the user is given more real estate to type in the input box. See the header pattern page for examples on how this variant is used.

Resize your window to see this in action.

<script src="jquery-2.2.4.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.1.1/util.js"></script>
<script src="bootstrap/4.1.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.1.1/bootstrap.js"></script>

<!-- Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
	<label for="search-field" class="sr-only">Search</label>
	<input id="search-field" class="form-control 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>

<!-- Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<button class="cui search-box visible-xxs" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
	<span class="form-control search-box-input"></span>
	<span class="cui search-box-btn btn-md icon-only primary">
		<span class="cicon-search"></span>
		<span class="sr-only">Submit search</span>
	</span>
</button>

<!-- Part 3. Modal, embedded in the document, activated by the mobile faux search box -->
<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
	<div class="modal-dialog modal-fs-mobile" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h2 id="modal-search-title" class="modal-title">Search</h2>
				<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
			</div>
			<div class="modal-body">
				<div class="cui search-box">
					<label for="search-field-modal" class="sr-only">Search</label>
					<input id="search-field-modal" class="form-control 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>
	</div>
</div>

Sub-search

This sub search pattern can be used for page-level search. The component will fill to 100% width of its container; therefore, it is best to apply a reasonable width to the container.

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