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

Previous Services Next FAQs

Quick Access

Home Getting Started UI Kit Roadmap

Guidelines

Typography Color system Iconography Layout & spacing Input & fields

Buttons Responsive Accessibility Design Tokens Content Design

Contact

sds@sdd.shj.ae +971 600 567890

Last updated on 20/11/2025