Skip to content

Updated

Copy page

Booking app search and filters

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.

Copy page

Updated

On this page
  1. Preview
  2. Live components
  3. The pattern
  4. Built from
  5. iOS and Material
  6. Related
  7. Get the file

Preview

Results, Filters, Dates, Guests, from the Booking page of the Appetite UI Figma file. The theme switch shows the dark frames.

Booking app, search and filters393 x 852 each, Light and Dark
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 cardBooking app Results screen in dark mode: 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
Results
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 buttonsBooking app Filters screen in dark mode: 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
Filters
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 nightsBooking app Dates screen in dark mode: 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
Dates
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 childBooking app Guests screen in dark mode: 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
Guests
Screens, screen, what it shows
ScreenWhat it shows
ResultsA map with price pins and a sheet of results
FiltersPrice range, place type, bedrooms and amenities
DatesA range on a calendar and flexible date chips
GuestsFour counters and a capacity note

Which components carry the search and filters pattern?

The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.

Search and filters, live componentsKit geometry, light and dark

Search, Field

Chip, filters

Stepper and Button

2

How does this screen follow the search and filters pattern?

The rules every search and filters screen in the kit follows, and what this one does with each.

The pattern, rule, on this screen
RuleOn the booking app
Count the results on the buttonFilters 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 filtersFilters, 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 ShowFilters 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.

What is it built from?

Every control with a component is an instance of it, so one token change moves these screens with the rest of the file.

Built from, component, screens
ComponentScreens
Top BarResults, Filters, Dates, Guests
ChipResults, Filters, Dates
Vertical CardResults
NavigationResults
Range SliderFilters
StepperFilters, Guests
ListFilters
ButtonFilters, Dates, Guests
Segmented ControlDates
Date PickerDates

What changes between iOS and Material?

The frames are drawn in the ios-md Platform mode. Switch a frame to android and these variables take the Material values; the components below are where the two systems draw the same need differently.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/sheet/corner1228
platform/bar/top-height4464
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
ChipNo counterpartM3 / Chip, 32 high at radius 8The Apple pages have no chip
SheetiOS / Sheet - Full ScreenM3 / Bottom sheet 412 wide and Side Sheet 320 wideMaterial adds a side sheet for large screens

Start from these screens.

Every frame on this page is part of the Appetite UI file, drawn from its components and bound to its variables, so one brand edit moves every screen in light and dark.

The file holds 589 variables in 6 collections and exports its token values to SwiftUI, Jetpack Compose, Flutter and CSS. Solo covers one designer and Team up to ten people. You pay once and keep lifetime updates. Price goes up Nov 1

The read-only Figma preview opens the whole file, every screen and every variable, before you buy.

Get lifetime accessOpen the Figma previewSee the plans