The archive filter bar allows users to narrow article and research listings by taxonomy — tinnitus type, treatment modality, stage, evidence level, and audience. It presents a search input alongside filter controls, adapting its layout between desktop and mobile.
On desktop, filters appear as inline dropdown selects in a horizontal row with a “Filter” submit button. On mobile, each filter category becomes a compact chip in a horizontally scrollable row. Tapping a chip opens a checkbox dropdown; selections apply immediately and the chip fills to show the active count. This avoids stacking full-width dropdowns on small screens while keeping all filter categories accessible.
The component uses Tom Select for multi-select enhancement on the WordPress site, with custom CSS restyling for the chip pattern on mobile. This component uses naluma design system tokens (Plus Jakarta Sans, warm earth palette).
Search is optional. The search input can be omitted on pages where text search is not needed. The chip row works independently.
Consistent 6px border-radius. All controls (search, chips, dropdowns, buttons) use the same 6px radius — do not mix with pill shapes.
Immediate filtering on mobile. Do not add an explicit “Apply” button inside the dropdown — each checkbox change filters results immediately, reducing friction.
Active chip must show count. When a filter has selections, always display the count (e.g., “Type (2)”). This gives users confidence about what is filtered.
“Reset all” placement. The reset link appears at the trailing edge of the chip row, scrolling into view when needed. Do not place it above or below the chips.