Patterns

Search by title number

Use the ‘Search by title number’ pattern to help a user find information that we hold about an individual property title.

HTML
Nunjucks

HTML

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="title-number">
      Search by title number
    </label>
  </h1>
  <input class="govuk-input govuk-input--width-10" id="title-number" name="title-number" type="text" spellcheck="false">
</div>
<button class="govuk-button" data-module="govuk-button">
  Search
</button>

Nunjucks

{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukInput({
  label: {
    text: "Search by title number",
    classes: "govuk-label--l",
    isPageHeading: true
  },
  classes: "govuk-input--width-10",
  id: "title-number",
  name: "title-number",
  spellcheck: false
}) }}
{{ govukButton({
  text: "Search"
}) }}

When to use this pattern

Use this pattern on public facing services.

This guidance applies whether a user is signed into an account or not.

There will be separate guidance for business customers.

Who needs this pattern

About 6% of users who interact with our GOV.UK service[s] use this method to find land and property information.

This seems like a small number, but we’ve seen that many users choose to use this method even if they have other ways to find the land or property they need.

We believe this is because a title number relates to one title. An address may return multiple titles which increases the risk of a user making the wrong choice.

When not to use this pattern

Do not use this pattern unless you have evidence that your users:

know what a title number is
know where to find one
understand the information that we return when they use it

How to use with hint text

If you need to include hint text, then we can let a user know where they can find a title number – to help them make an informed decision of whether this method is suitable for them to use.

HTML
Nunjucks

HTML

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="title-number">
      Search by title number
    </label>
  </h1>
  <div id="title-number-hint" class="govuk-hint">
    You can find the title number on HM Land Registry documents, like copies of the register
  </div>
  <input class="govuk-input govuk-input--width-10" id="title-number" name="title-number" type="text" spellcheck="false" aria-describedby="title-number-hint">
</div>
<button class="govuk-button" data-module="govuk-button">
  Search
</button>

Nunjucks

{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{{ govukInput({
  label: {
    text: "Search by title number",
    classes: "govuk-label--l",
    isPageHeading: true
  },
  classes: "govuk-input--width-10",
  hint: {
    text: "You can find the title number on HM Land Registry documents, like copies of the register"
  },
  id: "title-number",
  name: "title-number",
  spellcheck: false
}) }}
{{ govukButton({
  text: "Search"
}) }}

Do not include:

real title numbers in any hint text
the format of a title number as the hint

This is because:

the format could change
your example could become a title number in the future

Read more about hint text on the GOV.UK design system

How to write your error messages

You must not use an error message that tells a user if the title number they have entered is a real title number or not.

We can let a user know that we do not recognise what they have entered and prompt them to try again.

For example:

‘Enter a title number’
‘We do not recognise that title number. Check title number and try again’.

HTML
Nunjucks

HTML

<div class="govuk-error-summary" data-disable-auto-focus="true" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      There is a problem
    </h2>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          <a href="#title-number">Check title number and try again</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="govuk-form-group govuk-form-group--error">
  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="title-number">
      Search by title number
    </label>
  </h1>
  <div id="title-number-hint" class="govuk-hint">
    You can find the title number on HM Land Registry documents, like copies of the register
  </div>
  <p id="title-number-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Check title number and try again
  </p>
  <input class="govuk-input govuk-input--width-10 govuk-input--error" id="title-number" name="title-number" type="text" spellcheck="false" aria-describedby="title-number-hint title-number-error">
</div>
<button class="govuk-button" data-module="govuk-button">
  Search
</button>

Nunjucks

{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{{ govukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Check title number and try again",
      href: "#title-number"
    }
  ],
  disableAutoFocus: true
}) }}
{{ govukInput({
  label: {
    text: "Search by title number",
    classes: "govuk-label--l",
    isPageHeading: true
  },
  classes: "govuk-input--width-10",
  hint: {
    text: "You can find the title number on HM Land Registry documents, like copies of the register"
  },
  id: "title-number",
  name: "title-number",
  spellcheck: false,
  errorMessage: {
    text: "Check title number and try again"
  }
}) }}
{{ govukButton({
  text: "Search"
}) }}

Read more about error messages on the GOV.UK design system

How it works if you have more than 1 search method

Start with 1 search method per page. This means that you can help users recover from errors more easily.

Research shows that this pattern works best when it’s used in conjunction with a search menu that is easy to find and navigate between.

Search method navigation has been tested in both Search for local land charges and Search for land and property information.

For more information about search method navigation – speak to the service teams.

Research on this pattern

We’ve done research on this pattern with 26 individual users. 5 users stated they had low digital confidence.

The user types were:

prospective and recent homeowners
leaseholders
small businesses – working on behalf of clients or organisations
a mixture of users who had previous experience of using HMLR services and those that did not

We also continue to monitor live user feedback and analytics on the use of this pattern.

Where we’d like to do more research

The small number of users on mobile devices did not find any problems with finding the menu of search methods even though they were stacked rather than in the horizontal position. However, we’d like to do more targeted research with users of mobile devices.

We’d like to do more research with users of assistive technology including:

screen readers
speech to text software

Help improve this pattern

Contribute to the discussion about this pattern: https://github.com/LandRegistry/hmlr-design-system-2/issues

Help improve this pattern

If you spot a problem with this guidance you can propose a change.

If you’re not sure how to do this, read guidance on how to propose changes in GitHub.

Need help?

If you’ve got a question about the HM Land Registry Design System, contact the team.