Search
Basic search box
Code
<div class="cui search-box">
<label for="{{ Input id }}" class="sr-only">Search</label>
<input id="{{ Input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></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.
Code
<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 d-none d-sm-block">
<label for="{{ Input id }}" class="sr-only">Search</label>
<input id="{{ Input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></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 d-block d-sm-none" 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" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</span>
</button>
<!-- Part 3. Modal, 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="{{ Modal input id }}" class="sr-only">Search</label>
<input id="{{ Modal input id }}" name="{{ Input name }}" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Add script to footer to focus on search field when modal is opened -->
<script type="text/javascript">var searchModalId = "<?= 1 ?>";</script>
<script>
$(document).ready(function() {
const searchMobile = document.getElementById('search-field-modal-' + searchModalId);
//Focus on search input when mobile modal opens
const mobileSearchModal = document.getElementById('modal-search-' + searchModalId);
$(mobileSearchModal).on('shown.bs.modal', function () {
searchMobile.focus();
})
});
</script>
Sub-search
This sub search pattern can be used for page-level search.
The search bar will fill to 100% width of its container; therefore, it is best to wrap it inside a container with a reasonable width. In the example below, the width is controlled by placing it inside the Bootstrap grid.
Code
<!-- The Bootstrap grid can be used to handle the width of the sub-search bar. -->
<!-- Customize the column classes for your scenario -->
<div class="row">
<div class="col-sm-9 col-md-8 col-lg-6">
<!-- Sub-search bar -->
<label for="{{ Input id }}">Search</label>
<div class="cui input-group">
<input id="{{ Input id }}" name="{{ Input name }}" type="search" class="form-control">
<button class="cui btn-md primary" id="submit">
<span class="btn-wrapper">
<span class="btn-text">Go</span>
</span>
</button>
</div>
</div>
</div>