Header & Footer

Search

A site search form, inline or an expanding icon.

Live demo

See it in action

Inline form — always visible

Icon — expands on click

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<p class="sc-spec-label">Inline form — always visible</p>
	<div class="sc-site-search search-2e972a7b sc-site-search--inline-form">
		<form role="search" method="get" class="sc-search-form" action="https://demos.unysonplus.com/">
			<label class="screen-reader-text" for="search-field">Search for:</label>
			<input type="search" id="search-field" class="sc-search-field" placeholder="Search the site …" value="" name="s">
			<button type="submit" class="sc-search-submit" aria-label="Search"><svg class="sc-search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"></circle><line x1="11" y1="11" x2="14.5" y2="14.5"></line></svg></button>
		</form>
	</div>
	<p class="sc-spec-label">Icon — expands on click</p>
	<div class="sc-site-search search-18681227 sc-site-search--icon-toggle">
		<button type="button" class="sc-search-toggle" aria-expanded="false" aria-label="Open search"><svg class="sc-search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"></circle><line x1="11" y1="11" x2="14.5" y2="14.5"></line></svg></button>
		<div class="sc-search-panel" hidden>
			<form role="search" method="get" class="sc-search-form" action="https://demos.unysonplus.com/">
				<label class="screen-reader-text" for="search-field">Search for:</label>
				<input type="search" id="search-field" class="sc-search-field" placeholder="Search …" value="" name="s">
				<button type="submit" class="sc-search-submit" aria-label="Search"><svg class="sc-search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"></circle><line x1="11" y1="11" x2="14.5" y2="14.5"></line></svg></button>
			</form>
		</div>
	</div>
</section>

To learn more about the Search shortcode, please check out the online manual here.