How do I theme exposed filters?

Question

I'm theming a Drupal 8 Views page. I created the twig template file and can output the 2 exposed filters with the code below. The problem is that nothing happens when I click Apply on the exposed filters. It's probably missing some attribute, but I can't figure out how to do it. Has anyone done this?

{% if exposed %}
  <div class="view-filters form-group">
    {{ exposed.field_category_target_id }}
    {{ exposed.field_address_locality }}
    {{ exposed.actions }}
  </div>
{% endif %}

Here are the printout of the exposed variable

Answer 1

This is not possible in a Views template. Form elements rendered here can't be submitted because they are not in a html form (between <form>/</form>).

You need a custom form template so that you are inside of the form. For the Views exposed form there is already a customizable form template in core:

/core/themes/stable/templates/views/views-exposed-form.html.twig

{#
/**
 * @file
 * Theme override of a views exposed form.
 *
 * Available variables:
 * - form: A render element representing the form.
 *
 * @see template_preprocess_views_exposed_form()
 */
#}
{% if q is not empty %}
  {#
    This ensures that, if clean URLs are off, the 'q' is added first,
    as a hidden form element, so that it shows up first in the POST URL.
  #}
{{ q }}
{% endif %}
{{ form }}

You can copy this twig to the /template folder of your theme and start theming the form elements:

  {{ form.field_category_target_id }}
  {{ form.field_address_locality }}
  {{ form|without('field_category_target_id', 'field_address_locality') }}

---

See How do I assign a template to the user edit form? for more info how to add and use these form templates in other forms.