@x-govuk/govuk-prototype-components/src/govuk-prototype-kit/templates/autocomplete.html

Common and experimental components that are not yet part of the GOV.UK Design System

{% extends "layouts/main.html" %}

{% block pageTitle %}
  Autocomplete question page template – {{ serviceName }} – GOV.UK Prototype Components
{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "javascript:window.history.back()"
  }) }}
{% endblock %}

{% block content %}
  <form class="form" action="/url/of/next/page" method="post">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        {{ xGovukAutocomplete({
          id: "country",
          name: "country",
          allowEmpty: false,
          label: {
            classes: "govuk-label--l",
            isPageHeading: true,
            text: "Country of birth"
          },
          hint: {
            text: "For example, Austria or Belgium"
          },
          items: [
            { text: "Austria" },
            { text: "Belgium" },
            { text: "Bulgaria" },
            { text: "Croatia" },
            { text: "Republic of Cyprus" },
            { text: "Czech Republic" },
            { text: "Denmark" },
            { text: "Estonia" },
            { text: "Finland" },
            { text: "France" },
            { text: "Germany" },
            { text: "Greece" },
            { text: "Hungary" },
            { text: "Ireland" },
            { text: "Italy" },
            { text: "Latvia" },
            { text: "Lithuania" },
            { text: "Luxembourg" },
            { text: "Malta" },
            { text: "Netherlands" },
            { text: "Poland" },
            { text: "Portugal" },
            { text: "Romania" },
            { text: "Slovakia" },
            { text: "Slovenia" },
            { text: "Spain" },
            { text: "Sweden" }
          ]
        }) }}

        {{ govukButton({
          text: "Continue"
        }) }}
      </div>
    </div>
  </form>
{% endblock %}