FILTERS: Consumer results-filtering surfaces
VARIANTS: Advanced panel | Rail

Consolidated entry for the two filtering patterns. Advanced panel is the collapsible zone below the hero pill; Rail is the 280px left-aside filter panel for results pages.

PATTERN: Advanced Filters Panel (consumer-only)
COMPOSES: form-check + form-select

Collapsible filter zone that drops below the Hero Search pill. White card with sky-blue border. Sections: quick-toggle checkboxes, Gender chip-buttons (3-col grid), Ofsted rating selects (2-col grid with orange warnings).

Full panel — all sections visible

Demo: Panel with 3 active filters indicated by the count badge. Quick Apply is pre-checked. Gender + Ofsted sections fully rendered.

Advanced Filter 3
Gender of school :
Ofsted Rating :

(Applies to school inspected AFTER September 2024):

1. Quality of Education :
2. Behaviour & Attitudes :
3. Personal Development :
4. Leadership & Management :

(Applies to school inspected BEFORE September 2024):

<div class="advanced-filters-panel"><div class="advanced-filters-panel-header">...</div>...</div>

In context — below Hero Search

The panel drops 16px below the hero pill. Together they sit inside the consumer hero wash.

Type of school
Sixth Form & Colleges
What to study
Mathematics A-Level
Near to
KA30 8LD
Advanced Filters 63 potential results
Advanced Filter 2
Gender of school :

PATTERN: filter-rail
COMPOSES: form-check, form-select
STATES: Expanded (default) · Expanded with collapse toggle (map mode) · Collapsed button

280px-wide left-aside filter panel for ApplicaaOne results pages. Quick-toggle checkboxes, gender section, and Ofsted rating selects. In map mode a collapse chevron appears in the header. When collapsed the entire rail shrinks to a 44×44 sky-blue icon button with a red active-count badge.

1. Default expanded rail

Expanded (default): Full content — header with title + active-count badge and "Clear All" link, four quick-toggle checkboxes, Gender section, and Ofsted Rating section with four dimension selects, warning notices, and a legacy (before-2024) select.

<aside class="filter-rail">...</aside>

2. Map mode — with collapse toggle

Map mode: When the results list is replaced by a map, a collapse chevron button appears in the header alongside the "Clear All" link. Clicking it switches the rail to the collapsed button state.

<!-- Add filter-rail-toggle button in header-actions for map mode -->

3. Collapsed button state

Collapsed: The entire rail collapses to a 44×44 sky-blue icon button with a sliders icon. A red 16×16 badge in the top-right corner shows the active filter count. Clicking restores the expanded rail.

<button class="filter-rail-collapsed-btn" type="button" aria-label="Show filter rail">
  <i class="fa-light fa-sliders" aria-hidden="true"></i>
  <span class="filter-rail-collapsed-badge" aria-hidden="true">3</span>
</button>

4. In-context: filter rail beside results

In context: The rail sits in a flex row alongside the results column. Use tw:flex tw:items-start tw:gap-5 on the parent to position the 280px rail and the fluid results column side by side.

Greenford High School

Greenford, UB6 · 2.4 km away

Ealing Fields High School

Ealing, W13 · 3.8 km away

Villiers High School

Southall, UB1 · 4.1 km away

<div class="tw:flex tw:items-start tw:gap-5">
  <aside class="filter-rail">...</aside>
  <div class="tw:flex-1">results...</div>
</div>