Filters are interactive components that allow users to refine, narrow, and organize content based on specific criteria. In the Sharjah Design System, filters help users efficiently find relevant information within large datasets, lists, or search results while maintaining clarity and consistency across digital services.
Purpose
Help users narrow down large lists or datasets
Improve discoverability of content and services
Support search and browsing experiences
Reduce cognitive load by showing only relevant results
Filters are especially useful in service listings, directories, dashboards, and data-heavy pages.
Filter Types
1. Inline / Quick Filter
Displayed as buttons or chips for fast selection.
Common uses:
Frequently used filters
Popular categories
Best practices:
Highlight active states clearly
Limit the number of quick filters shown
2. Advanced Filter
Used to conserve space when filter options are numerous.
Common uses:
Location
Date ranges
Status selections
Best practices:
Keep option lists concise
Use meaningful default labels
Avoid deep nesting
Accessibility Guidelines
All filter controls must be keyboard accessible
Use semantic HTML inputs for screen reader support
Ensure selected and unselected states are clearly distinguishable
Do not rely on colour alone to indicate selection
Responsive Behavior
Filters adapt based on screen size:
Display as a sidebar on large screens
Collapse into a drawer or modal on smaller devices
Maintain visibility of applied filters across breakpoints
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
