# Search and filter screens

> Search, results and filter screens from a Figma UI kit for iOS and Android apps: a map of stays, people search, a task search and two filter sheets.

Finding one thing among many, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. Search narrows by words, filters narrow by facts, and every screen here shows how many results are left before anyone commits.

Page: https://www.appetiteui.com/screens/patterns/search-and-filters.

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Booking app | Results | A map with price pins and a sheet of results | https://www.appetiteui.com/screens/booking/search-and-filters |
| Booking app | Filters | Price range, place type, bedrooms and amenities | https://www.appetiteui.com/screens/booking/search-and-filters |
| Social media app | Search | People matching a search, each with a Follow button | https://www.appetiteui.com/docs/screens-social |
| Social media app | Explore | A photo grid under search and topic chips | https://www.appetiteui.com/screens/social/feed |
| Task manager app | Search | Recent searches and results grouped by type | https://www.appetiteui.com/docs/screens-tasks |
| Task manager app | Filters | A sheet of filters over the Board | https://www.appetiteui.com/docs/screens-tasks |

## Rules

- Count the results on the button. A filter sheet ends on Show 24 stays or Show 3 results, so the effect of a filter is visible before it is applied.
- Chips for one tap filters. The filters people use most sit as Chips above the results; the rest wait in a sheet behind one button.
- Clear is always next to Show. Every filter sheet has a way back to no filters beside the button that applies them.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Sheet corner | 12 pt | 28 dp | `platform/sheet/corner` |
| Top bar height | 44 pt | 64 dp | `platform/bar/top-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Chip | No counterpart | M3 / Chip, 32 high at radius 8 | The Apple pages have no chip |
| Sheet | iOS / Sheet - Full Screen | M3 / Bottom sheet 412 wide and Side Sheet 320 wide | Material adds a side sheet for large screens |

## Questions

### Should filters be chips or a sheet?

Both: the filters people use most as chips above the results, the rest in a sheet behind one button. The sheet ends on a button that counts the results, such as Show 24 stays, beside Clear all.

### What should a search screen show before anyone types?

Recent searches and suggestions, so the screen is useful before the first letter. Appetite UI’s task search shows recent searches as removable chips and groups its results as Tasks, Projects and People.

## Sources

1. [Apple Human Interface Guidelines: Search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields)
2. [Material Design 3: Search](https://m3.material.io/components/search/overview)
3. [Material Design 3: Chips](https://m3.material.io/components/chips/overview)

## Related

- Booking app: [Booking app search and filters](https://www.appetiteui.com/screens/booking/search-and-filters)
- Docs: [Search](https://www.appetiteui.com/docs/search-field)
- Docs: [Chip](https://www.appetiteui.com/docs/chip)
- Docs: [Slider](https://www.appetiteui.com/docs/slider)
- Glossary: [Chip](https://www.appetiteui.com/academy/glossary/chip)
- Glossary: [Bottom sheet](https://www.appetiteui.com/academy/glossary/bottom-sheet)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)