# Views exposed filters

A wrapper for the exposed filter form of a view, carrying the Educare skin so a listing can lay its filters out without reaching for the form ID Views happens to generate.

## Bootstrap reference

> [Bootstrap 5.3 — Forms layout](https://getbootstrap.com/docs/5.3/forms/layout/)

## What it does

Use this component when you need the exposed filters of a view listing to:

- sit in one wrapping row whose controls bottom-align with each other
- let the keyword filter absorb the free space while select filters keep a steady column
- switch to a stacked, one-control-per-row layout
- collapse every control to the full row width below the `md` breakpoint
- take extra Bootstrap utility classes on the filter row
- expose the exposed form itself through a single slot
- carry the Educare skin — search icon, input/select styling, labels, and the ghost Apply Filter / Reset actions

## Files

- `views-exposed-filters.component.yml` — component schema and props
- `views-exposed-filters.twig` — component template
- `views-exposed-filters.scss` / `views-exposed-filters.css` — component styles
- `README.md` — usage notes and examples

## Props overview

### Layout

- `layout`: how the filters sit next to each other — `inline` or `stacked`; defaults to `inline`
- `utility_classes`: array of extra Bootstrap utility classes for the filter row; defaults to `[]`

## Slots

- `filters` — the exposed filter form of the view

## Example

```twig
{% embed 'vartheme_bs5_educare:views-exposed-filters' with {
  layout: 'inline',
  utility_classes: ['mb-4'],
} only %}
  {% block filters %}
    {{ exposed }}
  {% endblock %}
{% endembed %}
```

## Notes

- The component is `noUi: true` and `use_in_views: true` — it is not offered in the Canvas component list; it is meant to wrap the exposed form from a views template.
- `layout` adds the `views-exposed-filters--inline` / `views-exposed-filters--stacked` modifier class; the styles hang off `.views-exposed-form`, the wrapper Views renders inside the slot.
- This component mirrors the contract Vartheme BS5 shipped in [#3611865](https://www.drupal.org/project/vartheme_bs5/issues/3611865) / [MR !189](https://git.drupalcode.org/project/vartheme_bs5/-/merge_requests/189) — same `name`, `group: Views`, `noUi`, `use_in_views`, `layout` enum, `utility_classes`, and `filters` slot. Drupal SDC components are per-extension, so Vartheme BS5 Educare — a starterkit-derived theme with `base theme: false` — does not inherit that component and needs its own copy.
- The keyword filter is matched on `[class*="form-item-search"]`, so any exposed filter whose form item class contains `form-item-search` grows to fill the row.
- Skin values route through this theme's Bootstrap tokens (`var(--bs-*)`, `$spacer`, `$primary`) rather than hard-coded values. `--views-exposed-filters-input-focus-ring` restates the sitewide `.bef-exposed-form` block's focus ring (`rgba($primary, 0.15)`) so the two stay visually consistent; deduplicating that sitewide block against this component is tracked separately in [vartheme_bs5#3611875](https://www.drupal.org/project/vartheme_bs5/issues/3611875) and is out of scope here.
- `views-exposed-filters.css` is build output — edit `views-exposed-filters.scss` and run `yarn components:build`.
