# Filter Sort Patterns

> Filter and sort UI patterns for list and search interfaces.

- Skill: `dragoon0x/filter-sort-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/filter-sort-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/filter-sort-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/filter-sort-patterns

---


# Filter & Sort Patterns

## Filter Types
| Type | Best For | Implementation |
|------|----------|----------------|
| Checkbox | Multi-select categories | Expandable sections |
| Radio | Single-select | Expandable sections |
| Range slider | Price, rating, dates | Dual-thumb slider |
| Search | Large option lists | Searchable checkbox list |
| Toggle | Binary filters | Switch or chip |

## Design Patterns
- **Sidebar filters:** Desktop, persistent alongside results
- **Top bar filters:** Horizontal chips/pills above results
- **Filter modal:** Mobile, full-screen or bottom sheet
- **Applied filters:** Show as removable chips above results

## Rules
1. Show result count updating with each filter change
2. "Clear all" button always visible
3. Show active filter count on the filter button (mobile)
4. Persist filter state in URL (shareable, bookmarkable)
5. Remember recent filter combinations
6. Sort: relevance, newest, price, popular as minimum options