Search bar
The search bar is used in the main body of a page to let users search by one option.
Contents
<form action="#" method="get" id="header-search" class="ncs-search ncs-search__bar site-search ui-front">
<div class="search-wrapper">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="govuk-form-group">
<label class="ncs-label govuk-label" for="searchTerm">Course or keyword</label>
<div class="input-wrapper">
<input id="searchTerm" name="searchTerm" type="search" class="govuk-input search-input js-search-focus focus js-autocomplete ui-autocomplete-input" aria-label="Enter a keyword" data-autocomplete-maxlength="7" data-autocomplete-minlength="2" data-autocomplete-source="/" autocomplete="off" />
<div class="input-search-item input-submit-wrapper">
<button id="search-button" class="input-search-submit" type="submit" data-module="govuk-button">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Search form
The search form is used in the main body of a page to let users search by more than one option, such as a postcode and a keyword.
Contents
<form action="#" method="get" id="header-search" class="ncs-search ncs-search__bar site-search ui-front">
<div class="search-wrapper">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<div class="govuk-form-group">
<label class="ncs-label govuk-label" for="location-input">Town, city or postcode</label>
<div class="input-wrapper">
<input id="location-input" name="townOrPostcode" type="search" class="govuk-input govuk-!-width-full ui-autocomplete-input" aria-label="Enter Town, city or postcode" title="Enter a keyword" autocomplete="off" />
</div>
<span class="fac-visually-hidden" aria-hidden="true">
<input id="coordinates" name="sideBarCoordinates" type="hidden" value="" />
<input id="suggestedLocation-input" name="sideBarSuggestedLocation" type="hidden" value="" />
</span>
</div>
</div>
<div class="govuk-grid-column-two-thirds">
<div class="govuk-form-group">
<label class="ncs-label govuk-label" for="searchTerm">Course or keyword</label>
<div class="input-wrapper">
<input id="search-input" name="searchTerm" type="search" class="govuk-input search-input govuk-!-width-full" aria-label="Enter a keyword" title="Enter a keyword" autocomplete="off" />
<div class="input-search-item input-submit-wrapper">
<button id="search-button" class="input-search-submit" type="submit" data-module="govuk-button">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Search box
The search box is used outside of the main body of a page, such as in the right hand column.
Contents
<form action="#" method="get" id="job-profile-search-box" class="ncs-search ncs-search__box js-live-search-form site-search ui-front">
<div class="search-wrapper">
<div class="govuk-form-group">
<label class="ncs-label govuk-label js-search-label" for="search-main">Course or keyword</label>
<div class="input-wrapper">
<input id="search-main" name="searchTerm" type="search" class="govuk-input search-input js-search-focus js-autocomplete ui-autocomplete-input" aria-label="Enter a keyword" data-autocomplete-maxlength="7" data-autocomplete-minlength="2" data-autocomplete-maxnumberdisplyed="5" data-autocomplete-Fuzzysearch="True" data-autocomplete-source="#" autocomplete="off" />
<div class="input-search-item input-submit-wrapper">
<button id="search-button" class="input-search-submit" type="submit" data-module="govuk-button">Search</button>
</div>
</div>
</div>
</div>
<input id="JobProfileUrl" name="JobProfileUrl" type="hidden" value="" />
</form>
When to use search components
Use the search components to let users search collections using words or phrases.
You should add a search box on all the job profiles on the National Careers Service website.
How to use these components
You can copy the HTML and paste it where you'd like to display the search on your page.
You can then edit the text to show the content you'd like.