Auto suggestion and selection

A component used to present suggestions as the user types into a search box.

Summary

Summary of component

Open this example (Auto suggestion for page search) in a new tab 
<div
  class="tel-auto-suggestion tel-auto-suggestion--page"
  data-module="tel-auto-suggestion"
  data-display-length="12"
>
  <div
    class="nhsuk-form-group tel-auto-suggestion__search-wrapper tel-auto-suggestion__search-wrapper--has-button"
  >
    <input
      class="nhsuk-input"
      id="auto-suggest-search-page-search-example"
      name="search-query"
      type="text"
      placeholder="Search the learning hub"
      autocomplete="off"
      aria-autocomplete="list"
    />

    <button type="button" class="nhsuk-button tel-auto-suggestion__search-btn">
      <span class="nhsuk-u-visually-hidden">Search</span>
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="tel-auto-suggestion__svg-icon"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M11.8558 10.5296L15.7218 14.3861C15.8998 14.5627 16 14.8031 16 15.0539C16 15.3047 15.8998 15.5451 15.7218 15.7218C15.5451 15.8998 15.3047 16 15.0539 16C14.8031 16 14.5627 15.8998 14.3861 15.7218L10.5296 11.8558C7.76424 13.9254 3.86973 13.5064 1.60799 10.8959C-0.653748 8.28537 -0.513826 4.37088 1.92852 1.92852C4.37088 -0.513826 8.28537 -0.653748 10.8959 1.60799C13.5064 3.86973 13.9254 7.76424 11.8558 10.5296ZM6.58834 1.88537C3.9909 1.88537 1.88525 3.99101 1.88525 6.58846C1.88525 9.1859 3.9909 11.2915 6.58834 11.2915C9.18578 11.2915 11.2914 9.1859 11.2914 6.58846C11.2914 3.99101 9.18578 1.88537 6.58834 1.88537Z"
          fill="currentColor"
        />
      </svg>
    </button>
  </div>

  <div class="tel-auto-suggestion__filters-container">
    <nav
      class="tel-quick-filters"
      data-component="tel-quick-filters"
      data-module="tel-quick-filters"
    >
      <ul class="tel-quick-filters__list" role="list">
        <span class="tel-quick-filters__list-heading">Show</span>

        <li class="tel-quick-filters__list-item">
          <a
            href="#"
            class="tel-quick-filters__button tel-quick-filters__button--active"
            role="button"
            aria-pressed="true"
            data-filter-value="all"
          >
            <span>All</span>
          </a>
        </li>

        <li class="tel-quick-filters__list-item">
          <a
            href="#"
            class="tel-quick-filters__button"
            role="button"
            aria-pressed="false"
            data-filter-value="catalogues"
          >
            <span>Catalogues</span>
          </a>
        </li>

        <li class="tel-quick-filters__list-item">
          <a
            href="#"
            class="tel-quick-filters__button"
            role="button"
            aria-pressed="false"
            data-filter-value="courses"
          >
            <span>Courses</span>
          </a>
        </li>

        <li class="tel-quick-filters__list-item">
          <a
            href="#"
            class="tel-quick-filters__button"
            role="button"
            aria-pressed="false"
            data-filter-value="resources"
          >
            <span>Resources</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="tel-auto-suggestion__menu" role="region" aria-live="polite">
    <div class="tel-auto-suggestion__list">
      <div class="tel-auto-suggestion__item" data-filter-categories="">
        <a href="/search?q=cardiovascular" class="tel-auto-suggestion__link">
          <span class="tel-auto-suggestion__icon-container" aria-hidden="true">
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              class="tel-auto-suggestion__svg-icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M11.8558 10.5296L15.7218 14.3861C15.8998 14.5627 16 14.8031 16 15.0539C16 15.3047 15.8998 15.5451 15.7218 15.7218C15.5451 15.8998 15.3047 16 15.0539 16C14.8031 16 14.5627 15.8998 14.3861 15.7218L10.5296 11.8558C7.76424 13.9254 3.86973 13.5064 1.60799 10.8959C-0.653748 8.28537 -0.513826 4.37088 1.92852 1.92852C4.37088 -0.513826 8.28537 -0.653748 10.8959 1.60799C13.5064 3.86973 13.9254 7.76424 11.8558 10.5296ZM6.58834 1.88537C3.9909 1.88537 1.88525 3.99101 1.88525 6.58846C1.88525 9.1859 3.9909 11.2915 6.58834 11.2915C9.18578 11.2915 11.2914 9.1859 11.2914 6.58846C11.2914 3.99101 9.18578 1.88537 6.58834 1.88537Z"
                fill="currentColor"
              />
            </svg>
          </span>

          <span class="tel-auto-suggestion__link-text">
            <span class="tel-auto-suggestion__search-text-highlight"
              >cardio</span
            >vascular
          </span>
        </a>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="">
        <a href="/search?q=cardiology" class="tel-auto-suggestion__link">
          <span class="tel-auto-suggestion__icon-container" aria-hidden="true">
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              class="tel-auto-suggestion__svg-icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M11.8558 10.5296L15.7218 14.3861C15.8998 14.5627 16 14.8031 16 15.0539C16 15.3047 15.8998 15.5451 15.7218 15.7218C15.5451 15.8998 15.3047 16 15.0539 16C14.8031 16 14.5627 15.8998 14.3861 15.7218L10.5296 11.8558C7.76424 13.9254 3.86973 13.5064 1.60799 10.8959C-0.653748 8.28537 -0.513826 4.37088 1.92852 1.92852C4.37088 -0.513826 8.28537 -0.653748 10.8959 1.60799C13.5064 3.86973 13.9254 7.76424 11.8558 10.5296ZM6.58834 1.88537C3.9909 1.88537 1.88525 3.99101 1.88525 6.58846C1.88525 9.1859 3.9909 11.2915 6.58834 11.2915C9.18578 11.2915 11.2914 9.1859 11.2914 6.58846C11.2914 3.99101 9.18578 1.88537 6.58834 1.88537Z"
                fill="currentColor"
              />
            </svg>
          </span>

          <span class="tel-auto-suggestion__link-text">
            <span class="tel-auto-suggestion__search-text-highlight"
              >cardio</span
            >logy
          </span>
        </a>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="">
        <a href="/search?q=cardiomyopathy" class="tel-auto-suggestion__link">
          <span class="tel-auto-suggestion__icon-container" aria-hidden="true">
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              class="tel-auto-suggestion__svg-icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M11.8558 10.5296L15.7218 14.3861C15.8998 14.5627 16 14.8031 16 15.0539C16 15.3047 15.8998 15.5451 15.7218 15.7218C15.5451 15.8998 15.3047 16 15.0539 16C14.8031 16 14.5627 15.8998 14.3861 15.7218L10.5296 11.8558C7.76424 13.9254 3.86973 13.5064 1.60799 10.8959C-0.653748 8.28537 -0.513826 4.37088 1.92852 1.92852C4.37088 -0.513826 8.28537 -0.653748 10.8959 1.60799C13.5064 3.86973 13.9254 7.76424 11.8558 10.5296ZM6.58834 1.88537C3.9909 1.88537 1.88525 3.99101 1.88525 6.58846C1.88525 9.1859 3.9909 11.2915 6.58834 11.2915C9.18578 11.2915 11.2914 9.1859 11.2914 6.58846C11.2914 3.99101 9.18578 1.88537 6.58834 1.88537Z"
                fill="currentColor"
              />
            </svg>
          </span>

          <span class="tel-auto-suggestion__link-text">
            <span class="tel-auto-suggestion__search-text-highlight"
              >cardio</span
            >myopathy
          </span>
        </a>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="">
        <a href="/search?q=cardiologist" class="tel-auto-suggestion__link">
          <span class="tel-auto-suggestion__icon-container" aria-hidden="true">
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              class="tel-auto-suggestion__svg-icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M11.8558 10.5296L15.7218 14.3861C15.8998 14.5627 16 14.8031 16 15.0539C16 15.3047 15.8998 15.5451 15.7218 15.7218C15.5451 15.8998 15.3047 16 15.0539 16C14.8031 16 14.5627 15.8998 14.3861 15.7218L10.5296 11.8558C7.76424 13.9254 3.86973 13.5064 1.60799 10.8959C-0.653748 8.28537 -0.513826 4.37088 1.92852 1.92852C4.37088 -0.513826 8.28537 -0.653748 10.8959 1.60799C13.5064 3.86973 13.9254 7.76424 11.8558 10.5296ZM6.58834 1.88537C3.9909 1.88537 1.88525 3.99101 1.88525 6.58846C1.88525 9.1859 3.9909 11.2915 6.58834 11.2915C9.18578 11.2915 11.2914 9.1859 11.2914 6.58846C11.2914 3.99101 9.18578 1.88537 6.58834 1.88537Z"
                fill="currentColor"
              />
            </svg>
          </span>

          <span class="tel-auto-suggestion__link-text">
            <span class="tel-auto-suggestion__search-text-highlight"
              >cardio</span
            >logist
          </span>
        </a>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="">
        <a href="/search?q=cardiothoracic" class="tel-auto-suggestion__link">
          <span class="tel-auto-suggestion__icon-container" aria-hidden="true">
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              class="tel-auto-suggestion__svg-icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M11.8558 10.5296L15.7218 14.3861C15.8998 14.5627 16 14.8031 16 15.0539C16 15.3047 15.8998 15.5451 15.7218 15.7218C15.5451 15.8998 15.3047 16 15.0539 16C14.8031 16 14.5627 15.8998 14.3861 15.7218L10.5296 11.8558C7.76424 13.9254 3.86973 13.5064 1.60799 10.8959C-0.653748 8.28537 -0.513826 4.37088 1.92852 1.92852C4.37088 -0.513826 8.28537 -0.653748 10.8959 1.60799C13.5064 3.86973 13.9254 7.76424 11.8558 10.5296ZM6.58834 1.88537C3.9909 1.88537 1.88525 3.99101 1.88525 6.58846C1.88525 9.1859 3.9909 11.2915 6.58834 11.2915C9.18578 11.2915 11.2914 9.1859 11.2914 6.58846C11.2914 3.99101 9.18578 1.88537 6.58834 1.88537Z"
                fill="currentColor"
              />
            </svg>
          </span>

          <span class="tel-auto-suggestion__link-text">
            <span class="tel-auto-suggestion__search-text-highlight"
              >cardio</span
            >thoracic
          </span>
        </a>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="resources">
        <a
          href="/search?q=270-reducing-cardio-vascular-risk-in-mh"
          class="tel-auto-suggestion__link"
        >
          <span class="tel-auto-suggestion__link-text">
            270 Reducing
            <span class="tel-auto-suggestion__search-text-highlight"
              >Cardio</span
            >
            Vascular Risk in MH
          </span>
        </a>

        <div class="tel-auto-suggestion__subtext">
          Type:
          <span class="tel-auto-suggestion__subtext-value"
            >Learning resource</span
          >
        </div>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="resources">
        <a
          href="/search?q=cardiovascular-diseases-toolkit"
          class="tel-auto-suggestion__link"
        >
          <span class="tel-auto-suggestion__link-text">
            <span class="tel-auto-suggestion__search-text-highlight"
              >Cardio</span
            >vascular diseases toolkit
          </span>
        </a>

        <div class="tel-auto-suggestion__subtext">
          Type:
          <span class="tel-auto-suggestion__subtext-value"
            >Learning resource</span
          >
        </div>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="resources">
        <a
          href="/search?q=imt-teaching-cardiology"
          class="tel-auto-suggestion__link"
        >
          <span class="tel-auto-suggestion__link-text">
            IMT Teaching -
            <span class="tel-auto-suggestion__search-text-highlight"
              >Cardio</span
            >logy (06/05/26)
          </span>
        </a>

        <div class="tel-auto-suggestion__subtext">
          Type:
          <span class="tel-auto-suggestion__subtext-value"
            >Learning resource</span
          >
        </div>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="resources">
        <a
          href="/search?q=genomics-in-medical-specialties-cardiology"
          class="tel-auto-suggestion__link"
        >
          <span class="tel-auto-suggestion__link-text">
            Genomics in Medical Specialties:
            <span class="tel-auto-suggestion__search-text-highlight"
              >Cardio</span
            >logy
          </span>
        </a>

        <div class="tel-auto-suggestion__subtext">
          Type:
          <span class="tel-auto-suggestion__subtext-value"
            >Learning resource</span
          >
        </div>
      </div>

      <div class="tel-auto-suggestion__item" data-filter-categories="resources">
        <a
          href="/search?q=genomics-in-medical-specialties-cardiology"
          class="tel-auto-suggestion__link"
        >
          <span class="tel-auto-suggestion__link-text">
            Genomics in Medical Specialties:
            <span class="tel-auto-suggestion__search-text-highlight"
              >Cardio</span
            >logy
          </span>
        </a>

        <div class="tel-auto-suggestion__subtext">
          Type:
          <span class="tel-auto-suggestion__subtext-value"
            >Learning resource</span
          >
        </div>
      </div>
    </div>
  </div>
</div>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/auto-suggestion/macro.njk' import telAutoSuggestion %}

{{ telAutoSuggestion({
  id: "page-search-example",
  input_name: "search-query",
  placeholder: "Search the learning hub",
  type: "page",
  search_text: "cardio",
  show_other: false,
  show_search_button: true,
  show_filters: true,
  
  filters: {
    heading: "Show",
    showAll: true,
    allLabel: "All",
    activeTags: ["all"],
    tags: [
      { label: "Catalogues", value: "catalogues" },
      { label: "Courses", value: "courses" },
      { label: "Resources", value: "resources" }
    ]
  },

  menu_items: [
      {
        text: "cardiovascular",
        href: "/search?q=cardiovascular",
        icon: "search"
      },
      {
        text: "cardiology",
        href: "/search?q=cardiology",
        icon: "search"
      },
      {
        text: "cardiomyopathy",
        href: "/search?q=cardiomyopathy",
        icon: "search"
      },
      {
        text: "cardiologist",
        href: "/search?q=cardiologist",
        icon: "search"
      },
      {
        text: "cardiothoracic",
        href: "/search?q=cardiothoracic",
        icon: "search"
      },
      {
        text: "270 Reducing Cardio Vascular Risk in MH",
        href: "/search?q=270-reducing-cardio-vascular-risk-in-mh",
        type: "Learning resource",
        category: "resources"
      },
      {
        text: "Cardiovascular diseases toolkit",
        href: "/search?q=cardiovascular-diseases-toolkit",
        type: "Learning resource",
        category: "resources"
      },
      {
        text: "IMT Teaching - Cardiology (06/05/26)",
        href: "/search?q=imt-teaching-cardiology",
        type: "Learning resource",
        category: "resources"
      },
      {
        text: "Genomics in Medical Specialties: Cardiology",
        href: "/search?q=genomics-in-medical-specialties-cardiology",
        type: "Learning resource",
        category: "resources"
      },
      {
        text: "Genomics in Medical Specialties: Cardiology",
        href: "/search?q=genomics-in-medical-specialties-cardiology",
        type: "Learning resource",
        category: "resources"
      }
    ]
  }) }}

This is a page search variant

Example/s, variants and states including code and design assets

Below are variations on the page-search.

Radio button auto-suggestion

Open this example (Auto Suggestion with Radio Buttons) in a new tab 
<div
  class="tel-auto-suggestion tel-auto-suggestion--radio"
  data-module="tel-auto-suggestion"
  data-display-length="12"
  data-pagination="true"
  data-current-page="1"
  data-total-pages="1"
>
  <div class="nhsuk-form-group tel-auto-suggestion__search-wrapper">
    <input
      class="nhsuk-input"
      id="auto-suggest-search-radio-button-example"
      name="search-query"
      type="text"
      placeholder="Search roles"
      autocomplete="off"
      aria-autocomplete="list"
    />
  </div>

  <div class="tel-auto-suggestion__menu" role="region" aria-live="polite">
    <fieldset class="nhsuk-fieldset">
      <div class="nhsuk-radios">
        <div
          class="tel-auto-suggestion__item nhsuk-radios__item"
          data-filter-categories=""
        >
          <input
            class="nhsuk-radios__input"
            id="item-radio-button-example-1"
            name="autosuggest-choice"
            type="radio"
            value="midwife-tutor"
            aria-describedby="item-radio-button-example-1-hint"
          />
          <label
            class="nhsuk-label nhsuk-radios__label"
            for="item-radio-button-example-1"
          >
            Midwife - Tutor
          </label>

          <div
            class="nhsuk-hint nhsuk-radios__hint"
            id="item-radio-button-example-1-hint"
          >
            Students
          </div>
        </div>

        <div
          class="tel-auto-suggestion__item nhsuk-radios__item"
          data-filter-categories=""
        >
          <input
            class="nhsuk-radios__input"
            id="item-radio-button-example-2"
            name="autosuggest-choice"
            type="radio"
            value="nursing-associate"
            aria-describedby="item-radio-button-example-2-hint"
          />
          <label
            class="nhsuk-label nhsuk-radios__label"
            for="item-radio-button-example-2"
          >
            Nursing Associate
          </label>

          <div
            class="nhsuk-hint nhsuk-radios__hint"
            id="item-radio-button-example-2-hint"
          >
            Nursing and Midwifery Registered
          </div>
        </div>

        <div
          class="tel-auto-suggestion__item nhsuk-radios__item"
          data-filter-categories=""
        >
          <input
            class="nhsuk-radios__input"
            id="item-radio-button-example-3"
            name="autosuggest-choice"
            type="radio"
            value="nurse"
            aria-describedby="item-radio-button-example-3-hint"
            checked
          />
          <label
            class="nhsuk-label nhsuk-radios__label"
            for="item-radio-button-example-3"
          >
            Nurse
          </label>

          <div
            class="nhsuk-hint nhsuk-radios__hint"
            id="item-radio-button-example-3-hint"
          >
            Nursing and Midwifery Registered
          </div>
        </div>

        <div
          class="tel-auto-suggestion__item nhsuk-radios__item"
          data-filter-categories=""
        >
          <input
            class="nhsuk-radios__input"
            id="item-radio-button-example-4"
            name="autosuggest-choice"
            type="radio"
            value="health-visitor"
            aria-describedby="item-radio-button-example-4-hint"
          />
          <label
            class="nhsuk-label nhsuk-radios__label"
            for="item-radio-button-example-4"
          >
            Health Visitor
          </label>

          <div
            class="nhsuk-hint nhsuk-radios__hint"
            id="item-radio-button-example-4-hint"
          >
            Nursing and Midwifery Registered
          </div>
        </div>
      </div>
    </fieldset>
  </div>

  <div class="tel-auto-suggestion__pagination">
    <nav
      class="nhsuk-pagination nhsuk-pagination--numbered"
      role="navigation"
      aria-label="Pagination"
    >
      <a href="/example?page=22" class="nhsuk-pagination__previous" rel="prev">
        <svg
          class="nhsuk-icon nhsuk-icon--arrow-left"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="16"
          height="16"
          focusable="false"
          aria-hidden="true"
        >
          <path
            d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"
          />
        </svg>
        <span class="nhsuk-pagination__title">
          Previous<span class="nhsuk-u-visually-hidden"> page</span>
        </span>
      </a>

      <ul class="nhsuk-pagination__list">
        <li class="nhsuk-pagination__item">
          <a
            class="nhsuk-pagination__link"
            href="/example?page=1"
            aria-label="Page 1"
          >
            1
          </a>
        </li>

        <li class="nhsuk-pagination__item nhsuk-pagination__item--ellipsis">
          &ctdot;
        </li>

        <li class="nhsuk-pagination__item">
          <a
            class="nhsuk-pagination__link"
            href="/example?page=22"
            aria-label="Page 22"
          >
            22
          </a>
        </li>

        <li class="nhsuk-pagination__item nhsuk-pagination__item--current">
          <a
            class="nhsuk-pagination__link"
            href="/example?page=23"
            aria-label="Page 23"
            aria-current="page"
          >
            23
          </a>
        </li>

        <li class="nhsuk-pagination__item">
          <a
            class="nhsuk-pagination__link"
            href="/example?page=24"
            aria-label="Page 24"
          >
            24
          </a>
        </li>

        <li class="nhsuk-pagination__item nhsuk-pagination__item--ellipsis">
          &ctdot;
        </li>

        <li class="nhsuk-pagination__item">
          <a
            class="nhsuk-pagination__link"
            href="/example?page=42"
            aria-label="Page 42"
          >
            42
          </a>
        </li>
      </ul>

      <a href="/example?page=24" class="nhsuk-pagination__next" rel="next">
        <span class="nhsuk-pagination__title">
          Next<span class="nhsuk-u-visually-hidden"> page</span>
        </span>
        <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>
      </a>
    </nav>
  </div>

  <div class="tel-auto-suggestion__escape-wrapper">
    <p class="nhsuk-body-s">
      If you cant find your role select other and enter your role manually
    </p>

    <div class="nhsuk-radios">
      <div class="nhsuk-radios__item">
        <input
          class="nhsuk-radios__input"
          id="other-choice-escape-radio-button-example"
          name="autosuggest-choice"
          type="radio"
          value="other"
          data-aria-controls="conditional-other-panel-radio-button-example"
        />

        <label
          class="nhsuk-label nhsuk-radios__label"
          for="other-choice-escape-radio-button-example"
        >
          Other
        </label>
      </div>

      <div
        class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden"
        id="conditional-other-panel-radio-button-example"
      >
        <div class="nhsuk-form-group">
          <label
            class="nhsuk-label"
            for="other-role-manual-input-radio-button-example"
          >
            Your role
          </label>
          <input
            class="nhsuk-input nhsuk-u-width-two-thirds"
            id="other-role-manual-input-radio-button-example"
            name="other-role-manual"
            type="text"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

{% from 'tel/components/auto-suggestion/macro.njk' import telAutoSuggestion %}

{{ telAutoSuggestion({
  id: "radio-button-example",
  input_name: "search-query",
  placeholder: "Search roles",
  type: "Radio",
  show_other: true,
  other_text: "If you cant find your role select other and enter your role manually",
  other_label: "Other",
  show_search_button: false,
  show_filters: false,
  show_selected: false,
  
  pagination: true,
  pagination_previous_url: "/example?page=22",
  pagination_previous_page: "Previous page",
  pagination_next_url: "/example?page=24",
  pagination_next_page: "Next page",
  
  pagination_items: [
    {
      number: 1,
      href: "/example?page=1"
    },
    {
      ellipsis: true
    },
    {
      number: 22,
      href: "/example?page=22"
    },
    {
      number: 23,
      href: "/example?page=23",
      current: true
    },
    {
      number: 24,
      href: "/example?page=24"
    },
    {
      ellipsis: true
    },
    {
      number: 42,
      href: "/example?page=42"
    }
  ],
  
  menu_items: [
    {
      text: "Midwife - Tutor",
      value: "midwife-tutor",
      type: "Radio",
      hint: "Students",
      selected: false
    },
    {
      text: "Nursing Associate",
      value: "nursing-associate",
      type: "Radio",
      hint: "Nursing and Midwifery Registered",
      selected: false
    },
    {
      text: "Nurse",
      value: "nurse",
      type: "Radio",
      hint: "Nursing and Midwifery Registered",
      selected: true
    },
    {
      text: "Health Visitor",
      value: "health-visitor",
      type: "Radio",
      hint: "Nursing and Midwifery Registered",
      selected: false
    }
  ],

  selected_items: [],
  filters: []
}) }}

Content guidance

to-do

Research evidence

What has been seen so far

to-do

Confidence level

to-do