# Booking app search and filters

> Hotel and stay booking search for Figma: map results with price pins, a filter sheet, a date range calendar and guest steppers, from Appetite UI components.

The search half of a booking app in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: results on a map with six price pins and a sheet of stays, a Filters screen with a price range over a histogram, a February calendar with 12 to 17 selected, and steppers for Adults, Children, Infants and Pets.

Page: https://www.appetiteui.com/screens/booking/search-and-filters. Every screen of the app: https://www.appetiteui.com/docs/screens-booking.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Results | A map with price pins and a sheet of results | Top Bar, Chip, Vertical Card, Navigation |
| Filters | Price range, place type, bedrooms and amenities | Top Bar, Range Slider, Chip, Stepper, List, Button |
| Dates | A range on a calendar and flexible date chips | Top Bar, Segmented Control, Date Picker, Chip, Button |
| Guests | Four counters and a capacity note | Top Bar, Stepper, Button |

- Results, light: Booking app Results screen: Ruka, Finland with 12 to 17 Feb and 3 guests above Filters, Price, Cabin and Sauna chips, a map with six price pins from $120 to $240 and the $180 pin selected, and a sheet that opens on 24 cabins and a Lakeside cabin card
  Picture: https://www.appetiteui.com/images/au_booking_results_light.webp (dark: https://www.appetiteui.com/images/au_booking_results_dark.webp)
- Filters, light: Booking app Filters screen: a Price range slider from $60 to $320 under a price histogram, Any type, Room and Whole place chips, a Bedrooms stepper set to 2, Amenities rows with switches, and Clear all and Show 24 stays buttons
  Picture: https://www.appetiteui.com/images/au_booking_filters_light.webp (dark: https://www.appetiteui.com/images/au_booking_filters_dark.webp)
- Dates, light: Booking app Dates screen: a Dates and Flexible switch, a February 2026 calendar with 12 to 17 selected as one range, Flexible dates chips from Exact dates to plus or minus 7 days, and a Save button beside 12 to 17 February, 5 nights
  Picture: https://www.appetiteui.com/images/au_booking_dates_light.webp (dark: https://www.appetiteui.com/images/au_booking_dates_dark.webp)
- Guests, light: Booking app Guests screen: steppers for Adults 2, Children 1, Infants 0 and Pets 0, a note that the place fits up to 4 guests, and a Continue button beside 3 guests, 1 child
  Picture: https://www.appetiteui.com/images/au_booking_guests_light.webp (dark: https://www.appetiteui.com/images/au_booking_guests_dark.webp)

## How the screen follows the search and filters pattern

| Rule | On this screen |
| --- | --- |
| Count the results on the button | Filters ends on Show 24 stays and Guests on Continue beside 3 guests, 1 child, so every narrowing step says what it leaves. |
| Chips for one tap filters | Filters, Price, Cabin and Sauna sit as Chips over the map; the price range, bedrooms and amenities wait on the Filters screen. |
| Clear is always next to Show | Filters pairs Clear all with Show 24 stays, and Dates pairs a Dates and Flexible switch with flexible date chips from Exact dates to plus or minus 7 days. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Results, Filters, Dates, Guests |
| Chip | Results, Filters, Dates |
| Vertical Card | Results |
| Navigation | Results |
| Range Slider | Filters |
| Stepper | Filters, Guests |
| List | Filters |
| Button | Filters, Dates, Guests |
| Segmented Control | Dates |
| Date Picker | Dates |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| 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 |

## Related

- Booking app: [Booking app checkout](https://www.appetiteui.com/screens/booking/checkout)
- Booking app: [Booking app confirmation](https://www.appetiteui.com/screens/booking/confirmation)
- Docs: [Booking app screens, every screen and token](https://www.appetiteui.com/docs/screens-booking)
- Pattern: [Search and filter screens](https://www.appetiteui.com/screens/patterns/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)