Filters
FiltersActiveFilters
Chip strip showing currently active filters with individual remove and clear-all actions.
Filters
XRdFiltersActiveFilters renders active filter chips by reading from useFilters() and emits remove and clear events.
Components
<XRdFiltersActiveFilters />
Renders a wrapping flex row of UBadge chips for each active filter value. Each chip shows the group label and value label with a remove button. Optionally shows a "Clear all" button when more than one filter is active.
<XRdFiltersActiveFilters
:show-clear-all="true"
@remove="(groupId, value) => handleRemove(groupId, value)"
@clear="handleClearAll"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showClearAll | boolean | true | Show the "Clear all" button when multiple filters are active |
Emits
| Event | Payload | Description |
|---|---|---|
remove | (groupId: string, value: string | number) | Emitted when a single filter chip is removed |
clear | — | Emitted when "Clear all" is clicked |
AI Context
category: Filters
package: "@xenterprises/nuxt-x-restaurants"
components:
- XRdFiltersActiveFilters
use-when: >
Displaying a strip of active filter chips with remove and clear-all actions
alongside the restaurant explore page filter panel.