Search

When to use this component

Use the search component when you need to let users search and select a record from a database table.

When not to use this component

Do not use the search component as part of a table. In this case, you should use the searchable table component instead.

How it works

Always use the search component as the only component on a page. The search component is often accompanied by a radio component to display the search results, which requires the user to choose an option.

Set the contents of the <label> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

You will need to include an empty {% title %} block in your web template to remove the default page header.

Using hint text

Use hint text for help that's relevant to the majority of users, like how their information will be used, or where to find it. Hint text is not mandatory, and can be removed if not required.

Do not use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. Do not include links within hint text.

Minimum and maximum length

Use custom minchar and maxchar attributes to set a minimum or maximum length for your search input. For example, use input minchar="6" maxchar="6" when asking for a school's URN.

Use appropriately-sized inputs

Help users understand what they should enter by making search inputs the right size for the content they're intended for.

By default, the examples on this page contain the input class govuk-!-width-two-thirds. Removing this class makes the width of search inputs fluid and they will fit the full width of the container.

Read more about sizing your inputs (opens in a new tab) on the GOV.UK Design System.

Display your search results

Your search results should be displayed in an accompanying radio component unless your user research shows there is need for an alternative approach.

Read about how to display search results using a radio component.

HTML examples

Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.

Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.

Search with hint text

Enter your URN and click the search icon

If you don't know your URN, you can find it on the Get information about schools (GIAS) service.

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="search">
      Enter your URN and click the search icon
    </label>
  </h1>
  <div class="govuk-hint" id="search-hint">
    If you don't know your URN, you can find it on the Get information about schools (GIAS) service.
  </div>
  <p id="search-error" class="govuk-error-message govuk-visually-hidden">
    <span class="govuk-visually-hidden">Error:</span>
  </p>
  <div class="dfe-form-search__item-wrapper">
    <input class="dfe-form-search__item dfe-form-search__input govuk-!-width-two-thirds" id="search" name="search" title="Search" type="search">
    <div class="dfe-form-search__item dfe-form-search__submit-wrapper">
      <button class="dfe-form-search__submit" id="search-btn" type="submit">
        Search organisation
        <svg class="dfe-form-search__icon" width="27" height="27" viewBox="0 0 27 27" fill="none"
            xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <circle cx="12.0161" cy="11.0161" r="8.51613" stroke="currentColor" stroke-width="3"></circle>
            <line x1="17.8668" y1="17.3587" x2="26.4475" y2="25.9393" stroke="currentColor" stroke-width="3"></line>
        </svg>
      </button>
    </div>
  </div>
</div>
<div id="search-loader" class="loader govuk-visually-hidden"></div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="search">
      Enter your URN and click the search icon
    </label>
  </h1>
  <div class="govuk-hint" id="search-hint">
    If you don't know your URN, you can find it on the Get information about schools (GIAS) service.
  </div>
  <p id="search-error" class="govuk-error-message govuk-visually-hidden">
    <span class="govuk-visually-hidden">Error:</span>
  </p>
  <div class="dfe-form-search__item-wrapper">
    <input class="dfe-form-search__item dfe-form-search__input govuk-!-width-two-thirds" id="search" name="search" title="Search" type="search">
    <div class="dfe-form-search__item dfe-form-search__submit-wrapper">
      <button class="dfe-form-search__submit" id="search-btn" type="submit">
        Search organisation
        <svg class="dfe-form-search__icon" width="27" height="27" viewBox="0 0 27 27" fill="none"
            xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <circle cx="12.0161" cy="11.0161" r="8.51613" stroke="currentColor" stroke-width="3"></circle>
            <line x1="17.8668" y1="17.3587" x2="26.4475" y2="25.9393" stroke="currentColor" stroke-width="3"></line>
        </svg>
      </button>
    </div>
  </div>
</div>
<div id="search-loader" class="loader govuk-visually-hidden"></div>

{% endblock %}

Search without hint text

Search without hint

Example
HTML
Web Template

Enter your URN and click the search icon

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="search">
      Enter your URN and click the search icon
    </label>
  </h1>
  <p id="search-error" class="govuk-error-message govuk-visually-hidden">
    <span class="govuk-visually-hidden">Error:</span>
  </p>
  <div class="dfe-form-search__item-wrapper">
    <input class="dfe-form-search__item dfe-form-search__input govuk-!-width-two-thirds" id="search" name="search" title="Search" type="search">
    <div class="dfe-form-search__item dfe-form-search__submit-wrapper">
      <button class="dfe-form-search__submit" id="search-btn" type="submit">
        Search organisation
        <svg class="dfe-form-search__icon" width="27" height="27" viewBox="0 0 27 27" fill="none"
            xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <circle cx="12.0161" cy="11.0161" r="8.51613" stroke="currentColor" stroke-width="3"></circle>
            <line x1="17.8668" y1="17.3587" x2="26.4475" y2="25.9393" stroke="currentColor" stroke-width="3"></line>
        </svg>
      </button>
    </div>
  </div>
</div>
<div id="search-loader" class="loader govuk-visually-hidden"></div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="search">
      Enter your URN and click the search icon
    </label>
  </h1>
  <p id="search-error" class="govuk-error-message govuk-visually-hidden">
    <span class="govuk-visually-hidden">Error:</span>
  </p>
  <div class="dfe-form-search__item-wrapper">
    <input class="dfe-form-search__item dfe-form-search__input govuk-!-width-two-thirds" id="search" name="search" title="Search" type="search">
    <div class="dfe-form-search__item dfe-form-search__submit-wrapper">
      <button class="dfe-form-search__submit" id="search-btn" type="submit">
        Search organisation
        <svg class="dfe-form-search__icon" width="27" height="27" viewBox="0 0 27 27" fill="none"
            xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <circle cx="12.0161" cy="11.0161" r="8.51613" stroke="currentColor" stroke-width="3"></circle>
            <line x1="17.8668" y1="17.3587" x2="26.4475" y2="25.9393" stroke="currentColor" stroke-width="3"></line>
        </svg>
      </button>
    </div>
  </div>
</div>
<div id="search-loader" class="loader govuk-visually-hidden"></div>

{% endblock %}

Error messages

An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states.

If nothing is entered

'Enter [whatever it is]'. For example, 'Enter your URN'.

If the input is too short

'[whatever it is] must be [number] characters or more'. For example, 'Your reference number must be 8 characters or more'.

If the input is too long

'[whatever it is] must be [number] characters or less'. For example, 'Your reference must be 8 characters or less'.

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.