page-box-search.html

---
layout: default
title: Search Box
permalink: /box-search/
is_searchable: true
---

<div class="sui-notice sui-notice-warning">

	<p>You can stick this element to top when page scrolls using <code>sui-box-sticky</code> class.</p>

</div>

<section>

	<div class="sui-box">

		<div class="sui-box-search">

			<select class="sui-select-sm sui-select-inline">
				<option>Forms</option>
				<option>Polls</option>
				<option>Quizzes</option>
			</select>

			<select class="sui-select sui-select-sm sui-select-inline">
				<option>Contact Form</option>
				<option>Design Request</option>
				<option>Development Request</option>
				<option>Another Form</option>
			</select>

			<button class="sui-button">Bulk Actions</button>

		</div>

	</div>

	<div class="sui-box">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Documentation</h2>
		</div>

		<div class="sui-box-body">

			<!-- ROW: Specifications -->
			<div
				id="showcase-specs"
				version="2.3.3"
				utilities="false"
				utilities-page="{{ site.baseurl }}/utilities/"
				rtl-lang="false"
				single-column
			></div>

			<div class="sui-form-field">

				<span class="sui-settings-label sui-dark">Main Content</span>

				<span class="sui-description">The search box is commonly used on listings and entries pages for users to perform some actions. Some times it's accompanied by pagination element.</span>

				<div class="demo-code-block" style="margin-top: 10px;">

<pre class="sui-code-snippet html">
&lt;!--
NOTE:
Add here `sui-box-sticky` class to stick this element to top.
--&gt;
&lt;div class=&quot;sui-box&quot;&gt;

	&lt;div class=&quot;sui-box-search&quot;&gt;

		&lt;select class=&quot;sui-select-sm sui-select-inline&quot;&gt;
			&lt;option&gt;Option 1&lt;/option&gt;
			&lt;option&gt;Option 2&lt;/option&gt;
			&lt;option&gt;Option 3&lt;/option&gt;
		&lt;/select&gt;

		&lt;select class=&quot;sui-select sui-select-sm sui-select-inline&quot;&gt;
			&lt;option&gt;Option 1&lt;/option&gt;
			&lt;option&gt;Option 2&lt;/option&gt;
			&lt;option&gt;Option 3&lt;/option&gt;
		&lt;/select&gt;

		&lt;button class=&quot;sui-button&quot;&gt;Bulk Actions&lt;/button&gt;

	&lt;/div&gt;

&lt;/div&gt;
</pre>

				</div>

			</div>

		</div>

	</div>

</section>