Skip to content
Try free

Filtering and sorting (Desktop)

Desktop packActions and input

Desktop condition builders, filter chips, query bars, facet sidebars, saved views, date presets and quick search.

components
22
variants
126
recreations
13
themes
5

Also for mobile: Filtering and sorting

What’s inside

Fourteen desktop filtering patterns: a condition builder, property chips, a query bar with basic and advanced modes, qualifier search, a facet sidebar, column header filters, saved views, a summary bar, no results states, a responsive filter sheet, date presets, quick tabs, quick search and natural language filters. Sets cover loading counts, invalid, empty, error and applying states.

  • 14 filtering patterns, each with a documentation frame
  • Loading, invalid, no results and error states throughout
  • Six filter animation styles, with a reduced motion version
  • Recreations of Airtable, Notion, Linear, Jira, GitHub and Stripe
  • Condition row, every variant

    Condition row

    9 variants

  • Condition builder, every variant

    Condition builder

    Free sample

    12 variants

  • Filter chip, every variant

    Filter chip

    16 variants

  • Filter chip popover, every variant

    Filter chip popover

    4 variants

  • Query bar, every variant

    Query bar

    9 variants

  • Qualifier token, every variant

    Qualifier token

    6 variants

  • Qualifier search, every variant

    Qualifier search

    6 variants

  • Facet group, every variant

    Facet group

    4 variants

  • Facet sidebar, every variant

    Facet sidebar

    6 variants

  • Column header filter, every variant

    Column header filter

    4 variants

  • Saved view tab, every variant

    Saved view tab

    8 variants

  • Modified view bar, every variant

    Modified view bar

    4 variants

  • Save view dialog, every variant

    Save view dialog

    3 variants

  • Filter summary bar, every variant

    Filter summary bar

    5 variants

  • Filter empty state, every variant

    Filter empty state

    3 variants

    • No results
    • No data yet
    • Error
  • Filter sheet, every variant

    Filter sheet

    4 variants

  • Date preset option, every variant

    Date preset option

    3 variants

  • Date presets, every variant

    Date presets

    3 variants

  • Quick tab, every variant

    Quick tab

    6 variants

  • Quick tabs, every variant

    Quick tabs

    2 variants

  • Quick search, every variant

    Quick search

    4 variants

  • Natural language filter, every variant

    Natural language filter

    5 variants

    • Draft
    • Proposed
    • Applied
    • Interpreting
    • Not understood
Figma file
SuperDuper Pack: Filtering (Desktop)
Themes
Light, Dark, Light high contrast, Dark high contrast and Wireframe
Densities
Comfortable and Compact
Also in the file
Usage and accessibility notes, motion specs, Figma variables
Covers 1 UI element and 1 screen pattern
Sort control and Filter & sort

How Airtable, Notion, Linear, Notion and Jira and others do it

Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.

  • Condition builder, every variant

    Condition builder

    Recreated from Airtable, Notion

  • Property chips, every variant

    Property chips

    Recreated from Linear, Notion

  • Query bar, every variant

    Query bar

    Recreated from Jira

  • Qualifier search, every variant

    Qualifier search

    Recreated from GitHub

  • Date presets

    Recreated from Stripe Dashboard

  • Quick tabs

    Recreated from Stripe Dashboard

  • Facet sidebar, every variant

    Facet sidebar

    Recreated from Snowflake Marketplace, ZARA

  • Saved views, every variant

    Saved views

    Recreated from GitHub Projects

  • Summary bar

    Recreated from HubSpot

  • No results

    Recreated from GitHub

  • Sheet

    Recreated from ZARA

  • Quick search

    Recreated from Airtable, Notion

  • Natural language

    Recreated from Airtable

Not affiliated with, endorsed or sponsored by Airtable, Notion, Linear, Notion, Jira, GitHub, Stripe Dashboard, Snowflake Marketplace, ZARA, GitHub Projects, HubSpot, ZARA and Airtable. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Condition builder, every variant

See the condition builder full size, free

A filter condition builder with empty, incomplete, invalid, limit, counting and applying states. All 12 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More actions and input packs

See all actions and input

  • Date, time and calendars

    Desktop17 components73 variants4 recreations

    Desktop date and time fields, calendar and range pickers, time zones, month, week and day views, events and slot pickers.

    $9, or included with Pro

  • Search

    Desktop10 components34 variants4 recreations

    Desktop search: header trigger, global popover, autocomplete, match highlights, recents, scoped search, results and no results.

    $9, or included with Pro

  • Selection controls

    Desktop13 components54 variants3 recreations

    Desktop checkbox and radio groups, setting switches, sliders, steppers, ratings, swatches, a colour picker and a transfer list.

    $9, or included with Pro

Questions about the filtering and sorting pack

  • One Figma file: SuperDuper Pack: Filtering (Desktop). It has 22 components with 126 variants, 13 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.