Search field

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

A search field is used to initiate searches in smaller or larger parts of a system — for example in combination with a grid, a list, in a help window, or in a top menu for searching through the whole service.

Anatomy

Search icon
Text (placeholder / input text)
Container
Close icon button

States

Enabled
Hover
Focused
Disabled
Selected

Example
HTML

<div class="d-flex flex-wrap gap-24">
	<!-- 1. Enabled -->
	<div>
		<span class="docs-state-number" aria-hidden="true">1</span>
		<div class="form-group search-group docs-form-state-width">
			<label class="sr-only" for="search_state_enabled">Search (Enabled)</label>
			<input id="search_state_enabled" class="form-control" type="search" placeholder="Search...">
			<span aria-hidden="true" class="search-icon">Search icon</span>
		</div>
	</div>

	<!-- 2. Hover -->
	<div>
		<span class="docs-state-number" aria-hidden="true">2</span>
		<div class="form-group search-group docs-form-state-width">
			<label class="sr-only" for="search_state_hover">Search (Hover)</label>
			<input id="search_state_hover" class="form-control hover" type="search" placeholder="Search...">
			<span aria-hidden="true" class="search-icon">Search icon</span>
		</div>
	</div>

	<!-- 3. Focused -->
	<div>
		<span class="docs-state-number" aria-hidden="true">3</span>
		<div class="form-group search-group docs-form-state-width">
			<label class="sr-only" for="search_state_focused">Search (Focused)</label>
			<input id="search_state_focused" class="form-control focus" type="search" placeholder="Search...">
			<span aria-hidden="true" class="search-icon">Search icon</span>
		</div>
	</div>

	<!-- 4. Disabled -->
	<div>
		<span class="docs-state-number" aria-hidden="true">4</span>
		<div class="form-group search-group docs-form-state-width">
			<label class="sr-only" for="search_state_disabled">Search (Disabled)</label>
			<input id="search_state_disabled" class="form-control" type="search" placeholder="Search..." disabled>
			<span aria-hidden="true" class="search-icon">Search icon</span>
		</div>
	</div>

	<!-- 5. Selected -->
	<div>
		<span class="docs-state-number" aria-hidden="true">5</span>
		<div class="form-group search-group docs-form-state-width typing">
			<label class="sr-only" for="search_state_selected">Search (Selected)</label>
			<input id="search_state_selected" class="form-control" type="search" placeholder="Search..." value="Input text">
			<span aria-hidden="true" class="search-icon">Search icon</span>
			<button type="button" class="clear-search show" aria-label="Close">Close</button>
		</div>
	</div>
</div>

Width

Search fields can have a minimum width of 200 px and a maximum width of 510 px. The shipping SCSS applies a 510 px max-width on the wrapper so the field grows naturally inside its column up to that cap.

Clickable area

It is important that the entire search field is clickable to ensure usability and accessibility, making it easier and more efficient for all users to interact with.

Accessibility

Keyboard interaction

All components should be reachable via TAB and SHIFT+TAB keys.

Example
HTML

<div class="form-group search-group">
	<label class="sr-only" for="search_keyboard">Search</label>
	<input id="search_keyboard" class="form-control focus" type="search" placeholder="Search...">
	<span aria-hidden="true" class="search-icon">Search icon</span>
</div>

<div class="d-flex align-items-center" style="gap: 8px;">
	<div class="form-group search-group mb-0">
		<label class="sr-only" for="search_best_practice_do">Search</label>
		<input id="search_best_practice_do" class="form-control" type="search" placeholder="Search...">
		<span aria-hidden="true" class="search-icon">Search icon</span>
	</div>
	<button type="button" class="btn dropdown-toggle mb-0" aria-haspopup="true" aria-expanded="false">
		List view
	</button>
</div>

Match the size of your component to the elements next to it.

Example
HTML

<div class="d-flex align-items-center" style="gap: 8px;">
	<div class="form-group search-group docs-search-field-oversized mb-0">
		<label class="sr-only" for="search_best_practice_dont">Search</label>
		<input id="search_best_practice_dont" class="form-control" type="search" placeholder="Search...">
		<span aria-hidden="true" class="search-icon">Search icon</span>
	</div>
	<button type="button" class="btn dropdown-toggle mb-0" aria-haspopup="true" aria-expanded="false">
		List view
	</button>
</div>

Don't

The size of the search field should match the size of any elements next to it.

Specs

Search field specification measurements showing height 40 px, icon size 16 px, gap 8 px, padding 16 px, and corner radius 8 px

Developer reference

Implementation notes and patterns that complement the Figma-aligned guidance above. Use these snippets when wiring the component into your application.

Usage

Wrap a standard .form-control input in a .search-group div and append the leading .search-icon indicator. A sibling .clear-search element handles the clear affordance — the host app or the documentation preview script toggles the .typing class on the wrapper and the .show class on .clear-search when the input has a value.

Always include a label (visually hidden via .sr-only if no visible label is desired) so assistive tech can announce the field.

Example
HTML

<div class="form-group search-group">
	<label class="sr-only" for="search_usage">Search</label>
	<input id="search_usage" class="form-control" type="search" placeholder="Search...">
	<span aria-hidden="true" class="search-icon">Search icon</span>
	<button type="button" class="clear-search" aria-label="Close">Close</button>
</div>

Primary variant

Deprecated 2.6 — the .search-group-primary green-outline variant has no counterpart in the redesigned Figma. Removed in 3.0 — use the default .search-group instead.

Listed here for reference while the variant continues to ship.

Example
HTML

<form class="row" action="#" onsubmit="return false;">
	<div class="col-md-6">
		<div class="form-group search-group search-group-primary search-group-button">
			<label class="sr-only" for="search_deprecated_primary">Search</label>
			<input id="search_deprecated_primary" class="form-control" type="search" placeholder="Search...">
			<button type="submit" class="btn search-icon" tabindex="-1">Search</button>
		</div>
	</div>
</form>

Large size

Deprecated 2.6 — the .search-group-lg large-size variant has no counterpart in the redesigned Figma, which ships a single 40 px height. Removed in 3.0 — use the default .search-group instead.

Example
HTML

<form class="row" action="#" onsubmit="return false;">
	<div class="col-md-6">
		<div class="form-group search-group search-group-lg">
			<label class="sr-only" for="search_deprecated_lg_1">Search</label>
			<input id="search_deprecated_lg_1" class="form-control" type="search" placeholder="Search...">
			<span aria-hidden="true" class="search-icon">Search icon</span>
		</div>
	</div>
	<div class="col-md-6">
		<div class="form-group search-group search-group-button search-group-lg">
			<label class="sr-only" for="search_deprecated_lg_2">Search</label>
			<input id="search_deprecated_lg_2" class="form-control" type="search" placeholder="Search...">
			<button type="submit" class="btn search-icon" tabindex="-1">Search</button>
		</div>
	</div>
	<div class="col-md-6">
		<div class="form-group search-group search-group-primary search-group-button search-group-lg">
			<label class="sr-only" for="search_deprecated_lg_3">Search</label>
			<input id="search_deprecated_lg_3" class="form-control" type="search" placeholder="Search...">
			<button type="submit" class="btn search-icon" tabindex="-1">Search</button>
		</div>
	</div>
</form>

Submit button slot

Deprecated 2.6 — the .search-group-button variant (search field with an embedded submit button) has no counterpart in the redesigned Figma. Removed in 3.0 — pair a separate action button outside the field instead (for example a .btn.dropdown-toggle filter trigger, or any other plain .btn).

Example
HTML

<form class="row" action="#" onsubmit="return false;">
	<div class="col-md-12">
		<div class="form-group search-group search-group-button">
			<label class="sr-only" for="search_deprecated_button">Search</label>
			<input id="search_deprecated_button" class="form-control" type="search" placeholder="Search...">
			<button type="submit" class="btn search-icon" tabindex="-1">Search</button>
		</div>
	</div>
</form>