Components Search

Last updated: 11 October 2022

Open this example (Search (example)) in a new window 
<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.