Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Search input

These examples are used for automated tests and may not follow service manual best practice.

Search input default

Open this example in a new tab: Search input default

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-hint" id="example-hint">
    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" aria-describedby="example-hint" autocomplete="off" placeholder="NHS number">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  placeholder: "NHS number",
  hint: {
    text: "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
  },
  name: "example",
  width: 20
}) }}

Search input disabled

Open this example in a new tab: Search input disabled

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-search-input__input" id="example" name="example" type="search" disabled autocomplete="off" placeholder="NHS number">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" disabled aria-label="Search" aria-disabled="true">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  placeholder: "NHS number",
  name: "example",
  disabled: true
}) }}

Search input disabled button

Open this example in a new tab: Search input disabled button

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off" placeholder="NHS number">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" disabled aria-label="Search" aria-disabled="true">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  placeholder: "NHS number",
  name: "example",
  button: {
    disabled: true
  }
}) }}

Search input disabled with enabled button

Open this example in a new tab: Search input disabled with enabled button

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-search-input__input" id="example" name="example" type="search" disabled autocomplete="off" placeholder="NHS number">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  placeholder: "NHS number",
  name: "example",
  disabled: true,
  button: {
    disabled: false
  }
}) }}

Search input large

Open this example in a new tab: Search input large

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input nhsuk-search-input--large">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-input-wrapper--large nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--large nhsuk-input--width-30 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "l",
    isPageHeading: true
  },
  name: "example",
  large: true,
  width: 30
}) }}

Search input large with brand button

Open this example in a new tab: Search input large with brand button

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input nhsuk-search-input--large">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-input-wrapper--large nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--large nhsuk-input--width-30 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "l",
    isPageHeading: true
  },
  button: {
    variant: "brand"
  },
  name: "example",
  large: true,
  width: 30
}) }}

Search input with alternative icon

Open this example in a new tab: Search input with alternative icon

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by postcode
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-10 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by postcode",
    size: "m",
    isPageHeading: true
  },
  button: {
    icon: "arrow-right"
  },
  name: "example",
  width: 10
}) }}

Search input with brand button

Open this example in a new tab: Search input with brand button

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  button: {
    variant: "brand"
  },
  name: "example",
  width: 20
}) }}

Search input with brand button text

Open this example in a new tab: Search input with brand button text

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
      <span class="nhsuk-button__content">Search</span>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  button: {
    text: "Search",
    variant: "brand"
  },
  name: "example",
  width: 20
}) }}

Search input with brand button text only

Open this example in a new tab: Search input with brand button text only

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Product order number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      Find
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Product order number",
    size: "m",
    isPageHeading: true
  },
  button: {
    icon: false,
    text: "Find",
    variant: "brand"
  },
  name: "example",
  width: 20
}) }}

Search input with error message

Open this example in a new tab: Search input with error message

Error: Enter NHS number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <p class="nhsuk-error-message" id="example-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter NHS number
  </p>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--error nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" value="999 123 4567" aria-describedby="example-error" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  errorMessage: {
    text: "Enter NHS number"
  },
  name: "example",
  value: "999 123 4567",
  width: 20
}) }}

Search input with error message and hint

Open this example in a new tab: Search input with error message and hint

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Error: Enter NHS number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-hint" id="example-hint">
    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <p class="nhsuk-error-message" id="example-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter NHS number
  </p>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--error nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" value="999 123 4567" aria-describedby="example-hint example-error" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  hint: {
    text: "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
  },
  errorMessage: {
    text: "Enter NHS number"
  },
  name: "example",
  value: "999 123 4567",
  width: 20
}) }}

Search input with hidden label

Open this example in a new tab: Search input with hidden label

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <label class="nhsuk-label nhsuk-u-visually-hidden" for="example">
    Search by NHS number
  </label>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    classes: "nhsuk-u-visually-hidden"
  },
  name: "example",
  width: 20
}) }}

Search input with hint

Open this example in a new tab: Search input with hint

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="with-hint">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-hint">
    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="with-hint" name="example" type="search" aria-describedby="with-hint-hint" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  hint: {
    text: "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
  },
  id: "with-hint",
  name: "example",
  width: 20
}) }}

Search input with hint and value

Open this example in a new tab: Search input with hint and value

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-hint" id="example-hint">
    This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" value="999 123 4567" aria-describedby="example-hint" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  hint: {
    text: "This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
  },
  name: "example",
  value: "999 123 4567",
  width: 20
}) }}

Search input without button

Open this example in a new tab: Search input without button

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  button: false,
  name: "example",
  width: 20
}) }}

Search input without page heading

Open this example in a new tab: Search input without page heading

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <label class="nhsuk-label" for="example">
    Search by NHS number
  </label>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number"
  },
  name: "example",
  width: 20
}) }}

Search input with prefix

Open this example in a new tab: Search input with prefix

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="with-prefix">
      Code lookup
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">SNOMED</div>
    <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10 nhsuk-search-input__input" id="with-prefix" name="example" type="search" value="160245001" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Code lookup",
    size: "m",
    isPageHeading: true
  },
  prefix: {
    text: "SNOMED"
  },
  id: "with-prefix",
  name: "example",
  value: "160245001",
  width: 10,
  code: true,
  button: {
    icon: "arrow-right",
    variant: "brand"
  }
}) }}

Search input with prefix and error message

Open this example in a new tab: Search input with prefix and error message

Error: Enter a SNOMED code

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="with-prefix">
      Code lookup
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-prefix-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter a SNOMED code
  </p>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">SNOMED</div>
    <input class="nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-10 nhsuk-search-input__input" id="with-prefix" name="example" type="search" aria-describedby="with-prefix-error" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--brand nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Code lookup",
    size: "m",
    isPageHeading: true
  },
  prefix: {
    text: "SNOMED"
  },
  errorMessage: {
    text: "Enter a SNOMED code"
  },
  id: "with-prefix",
  name: "example",
  width: 10,
  code: true,
  button: {
    icon: "arrow-right",
    variant: "brand"
  }
}) }}

Search input with secondary button

Open this example in a new tab: Search input with secondary button

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  button: {
    variant: "secondary"
  },
  name: "example",
  width: 20
}) }}

Search input with secondary button text

Open this example in a new tab: Search input with secondary button text

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Search by NHS number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
        <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
      </svg>
      <span class="nhsuk-button__content">Search</span>
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Search by NHS number",
    size: "m",
    isPageHeading: true
  },
  button: {
    text: "Search",
    variant: "secondary"
  },
  name: "example",
  width: 20
}) }}

Search input with secondary button text only

Open this example in a new tab: Search input with secondary button text only

Code

Markup

<div class="nhsuk-form-group nhsuk-search-input">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="example">
      Product order number
    </label>
  </h1>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-search-input__button" data-module="nhsuk-button" type="submit" aria-label="Search">
      Find
    </button>
  </div>
</div>

Macro

{% from "search-input/macro.njk" import searchInput -%}

{{ searchInput({
  label: {
    text: "Product order number",
    size: "m",
    isPageHeading: true
  },
  button: {
    icon: false,
    text: "Find",
    variant: "secondary"
  },
  name: "example",
  width: 20
}) }}