Design filters for mobile

Mobile search should make the current state, result count, and way back to results obvious without forcing visitors through a long wall of controls.

Prioritize the controls

Order facets by decision value, not by the order in which fields were created. Put the two or three filters most likely to reduce the set first.

Prefer:

• Dropdown or Searchable select for long flat lists;
• Hierarchy select when a term tree must remain compact;
• explicit numeric inputs when a slider would be difficult to control precisely;
• Manual submit mode for a panel where several choices are normally changed together.

Build a filter panel

Use Page Builder rows, columns, or a suitable responsive disclosure pattern to group facets. The Faceted Search elements remain responsible for filter state; the surrounding layout is responsible for showing and hiding the panel.

Keep these outside the panel when practical:

• Faceted Search Counts;
• Faceted Search Selections Count;
• a clear control that opens the filters;
• active selections or a reset action.

The visitor should be able to tell that filters remain active after the panel closes.

Configure map height

For a Map facet, set both Height and Mobile height. A desktop-height map can otherwise dominate a narrow screen. Consider Gesture handling: Cooperative when the map sits inside a scrolling page.

Test real interactions

At the narrowest supported viewport, confirm:

1. labels and counts do not overlap;
2. choice controls have comfortable tap targets;
3. searchable selects and autocomplete remain visible above the keyboard;
4. applying or resetting filters returns attention to a meaningful location;
5. loading feedback is visible;
6. no fixed panel hides the pager or last result;
7. the URL and browser Back behavior still work.

Also complete the keyboard and naming checks in Build accessible faceted search.