Components

Search

To be reviewed

Created in June 2021.

How ‘to be reviewed’ components work

Components with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently. Read about all the Design System statuses.

Open this 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 type="submit" 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"
  }
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

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.

Accessibility issues

There’s an accessibility issue with the search component. If you’re using it in your service, you need to add these issue details to your accessibility statement.

Screen reader and keyboard users cannot clear the text entry field

Screen reader and keyboard users cannot access the ‘x’ button to remove text from the search text entry field. This fails the following requirements:

• WCAG 2.2 success criterion 2.1.1 (Keyboard)
• WCAG 2.2 success criterion 2.4.3 (Focus order)
• WCAG 2.2 success criterion 2.4.7. (Focus visible)

We’re aware of this issue and plan to implement a fix by June 2025.

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

• how you have used this component in your service
• any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the search discussion on GitHub.