Components Search
Last updated: 11 October 2022
<div class="moj-search">
<form action="#" method="post">
<div class="govuk-form-group">
<label class="govuk-label moj-search__label govuk-!-font-weight-bold" for="search">
Find a person
</label>
<div id="search-hint" class="govuk-hint moj-search__hint ">
You can search by name, date of birth or national insurance number
</div>
<input class="govuk-input moj-search__input " id="search" name="search" type="search" aria-describedby="search-hint">
</div>
<button class="govuk-button moj-search__button " data-module="govuk-button">
Search
</button>
</form>
</div>
{%- from "moj/components/search/macro.njk" import mojSearch -%}
{{ mojSearch({
action: '#',
method: 'post',
input: {
id: 'search',
name: 'search'
},
label: {
text: 'Find a person',
classes: 'govuk-!-font-weight-bold'
},
hint: {
text: 'You can search by name, date of birth or national insurance number'
},
button: {
text: 'Search'
}
}) }}
When to use
Use the search component to let users search by word or phrase. This can be used within the Primary Navigation component.
How to use
You can configure the search form to be inversed on black and to hide and show labels and hints depending on your use case. You'll see examples of this on the Primary Navigation component page.