Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Search form

Allow users to search through or filter large collections of information.

Default size

Open this example in a new tab

HTML

<form method="get" class="das-search-form" action="#">
	<div class="govuk-form-group">
		<label for="search-form-example" class="govuk-label">
			Search
		</label>
		<div class="das-search-form__group">
			<input id="search-form-example" title="Search" class="govuk-input das-search-form__input" type="text">
			<div class="das-search-form__button-wrap">
				<button class="govuk-button das-search-form__button" type="submit">
					Search
				</button>
			</div>
		</div>
	</div>
</form>

Medium

Open this example in a new tab

HTML

<form method="get" class="das-search-form das-search-form--m" action="#">
	<div class="govuk-form-group">
		<label for="search-form-example" class="govuk-label">
			Search
		</label>
		<div class="das-search-form__group">
			<input id="search-form-example" title="Search" class="govuk-input das-search-form__input" type="text">
			<div class="das-search-form__button-wrap">
				<button class="govuk-button das-search-form__button" type="submit">
					Search
				</button>
			</div>
		</div>
	</div>
</form>

Large

Open this example in a new tab

HTML

<form method="get" class="das-search-form das-search-form--l" action="#">
	<div class="govuk-form-group">
		<label for="search-form-example" class="govuk-label">
			Search
		</label>
		<div class="das-search-form__group">
			<input id="search-form-example" title="Search" class="govuk-input das-search-form__input" type="text">
			<div class="das-search-form__button-wrap">
				<button class="govuk-button das-search-form__button" type="submit">
					Search
				</button>
			</div>
		</div>
	</div>
</form>