Form fields
Mobile28 components208 variants5 recreations
Mobile form fields with error and success states, each paired with the right iOS or Android keyboard.
$9, or included with Pro
Filtering and sorting (Mobile)
Mobile packActions and input
Mobile filter and sort patterns: chip bars, filter and sort sheets, price ranges, results bars, map and list, saved searches.
- components
- 12
- variants
- 41
- recreations
- 5
- themes
- 5
Also for desktop: Filtering and sorting
What’s inside
12 filtering patterns for phone apps: chip bars, filter sheets, sort sheets, applied counts, price range sliders, sticky results bars, filter tabs, quick toggles, inline sort, map and list views, no-results screens and saved searches. Sheets show live result counts, no matches and blocked states. Every page has a documentation frame and a live grid in light and dark, comfortable and compact, on 390 x 844 screens.
- Counting, no matches and blocked states on results bars
- Price range with a histogram and an invalid range state
- 5 recreations from stays, shopping, food, streaming and mail apps
Chip bar
3 variants
- Default
- Applied
- With sort
Filter sheet
Free sample4 variants
- Default
- Changed
- Counting
- No matches
Sort sheet
2 variants
- Single list
- With direction
Applied count
6 variants
- Button
- Icon only
- Inline
- None
- Some
Price range
3 variants
- Full range
- Narrowed
- Invalid
Results bar
5 variants
- Default
- Counting
- No matches
- Unchanged
- Blocked
Filter tabs
4 variants
- Tabs
- Segmented
- Counts none
- Counts shown
Quick toggles
4 variants
- Switch list
- Toggle chips
Inline sort
3 variants
- Default
- Changed
- Menu open
Map and list
2 variants
- List
- Map
No results
2 variants
- Filters
- Filters and search
Saved searches
3 variants
- List
- Save sheet
- Empty
- Figma file
- SuperDuper Pack: Filtering and sorting (Mobile)
- 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 Airbnb, Shop and Uber Eats 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.
Stays filters
Recreated from Airbnb
Shopping filters
Recreated from Shop
Food delivery filters
Recreated from Uber Eats
Streaming categories
Recreated from Netflix
Mail search chips
Recreated from Gmail
Not affiliated with, endorsed or sponsored by Airbnb, Shop, Uber Eats, Netflix and Gmail. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the filter sheet full size, free
A bottom filter sheet in its default, changed, counting and no matches states. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More actions and input packs
Selection controls
Mobile19 components216 variants3 recreations
Mobile switches, checkboxes, radios, sliders, steppers, ratings and swatches, each with every state drawn and documented.
$9, or included with Pro
Chips, tags and badges
Mobile12 components40 variants3 recreations
Mobile chips and badges: filter, choice, input, action and category chips, plus status, count, dot and verified badges.
$9, or included with Pro
Questions about the filtering and sorting pack
One Figma file: SuperDuper Pack: Filtering and sorting (Mobile). It has 12 components with 41 variants, 5 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.