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 19.3-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 11a5 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 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 19.3-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 11a5 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 19.3-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 11a5 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 19.3-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 11a5 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 19.3-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 11a5 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>
  <span class="nhsuk-error-message" id="example-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter NHS number
  </span>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-input--error 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 19.3-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 11a5 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>
  <span class="nhsuk-error-message" id="example-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter NHS number
  </span>
  <div class="nhsuk-input-wrapper nhsuk-search-input__wrapper">
    <input class="nhsuk-input nhsuk-input--width-20 nhsuk-input--error 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 19.3-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 11a5 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 19.3-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 11a5 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 19.3-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 11a5 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 19.3-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 11a5 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>
  <input class="nhsuk-input nhsuk-input--width-20 nhsuk-search-input__input" id="example" name="example" type="search" autocomplete="off">
</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 19.3-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 11a5 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 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 19.3-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 11a5 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 19.3-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 11a5 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
}) }}