Advanced Filters Panel
Composable right-side Sheet panel for advanced booking filters. Children-based API — compose any combination of RangeInput, CounterInput, FilterChipGroup, AmenityPicker, and PreferenceStrengthSelector inside. Includes scrollable body and Apply / Reset footer.
core/advanced-filters-panelInstallation
1 · Add registry to components.json
2 · Install component
Examples
Default
Price range, bedroom counter, amenity chips, and pet policy selector.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
openreq | boolean | — | Controlled open state. |
onOpenChangereq | (open: boolean) => void | — | Called when the sheet open state changes. |
childrenreq | React.ReactNode | — | Filter sections to render in the scrollable body. |
title | string | "Filters" | Panel heading. |
onApply | () => void | — | Called when the user clicks Apply. Also closes the sheet. |
onReset | () => void | — | Called when the user clicks Reset. |
activeCount | number | — | Number of active filters — shown as a badge in the header and on the Apply button. |