Site search box

Status

Stable

Type

Canada.ca site functionality

Last review

2025-04-14

Component version

Version 1.0

Purpose

The site search box is an element of the global header. It allows people to search Government of Canada content using a simple search field.

Results for site search are at the level of all Government of Canada web content, or a subset of content at the department or agency level.

How to implement

Refer to the below code samples.

Basic Site search box example

<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
	<h2>Search</h2>
	<form action="#" method="post" name="cse-search-box" role="search">
		<div class="form-group wb-srch-qry">
			<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca" />
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Search Canada.ca</span>
			</button>
		</div>
	</form>
</section>

Custom department Site search box example

<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
	<h2>Search</h2>
	<form action="#" method="post" name="cse-search-box" role="search">
		<div class="form-group wb-srch-qry">
			<label for="wb-srch-q" class="wb-inv">Search [department/theme]</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search [department/theme]" />
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Search</span>
			</button>
		</div>
	</form>
</section>