Components
Applied Filters
A horizontal bar that displays currently active filters as dismissible tags, grouped by category. Pairs with FilterDropdown to give users a clear overview of applied filters with one-click removal.
Installation
bunx @happlyui/cli@latest add applied-filters
Dependencies
npm packages
@remixicon/react
Registry dependencies
These are automatically installed when you add this component.
buttontaghapply-ui-utilspolymorphic
Usage
import * as AppliedFilters from "@/components/ui/applied-filters"
import { RiUserSettingsLine, RiSettings3Line } from "@remixicon/react"
const filters = [
{ key: 'role', label: 'Role', icon: RiSettings3Line, options: [
{ value: 'admin', label: 'Admin' },
{ value: 'member', label: 'Team member' },
]},
]
<AppliedFilters.Root
filters={filters}
selected={{ role: ['admin', 'member'] }}
onRemove={(key, value) => { /* remove value from key */ }}
onResetAll={() => { /* clear all */ }}
/>
Examples
Default
Multiple filter groups with dismissible tags and a reset button.
<AppliedFilters.Root filters={filters} selected={selected} onRemove={handleRemove} onResetAll={handleResetAll} />
Single Filter Group
A single active filter group.
<AppliedFilters.Root filters={filters} selected={{ role: ['admin'] }} onRemove={handleRemove} onResetAll={handleResetAll} />
Custom Group
Use CustomGroup and Tag sub-components for custom filter rendering (e.g. search inputs, date ranges).
<AppliedFilters.Root filters={[]} selected={{}} onRemove={() => {}}>
<AppliedFilters.CustomGroup label="Search" icon={RiSearchLine}>
<AppliedFilters.Tag onDismiss={() => {}}>query text</AppliedFilters.Tag>
</AppliedFilters.CustomGroup>
</AppliedFilters.Root>
With FilterDropdown
Combined with FilterDropdown for a complete filter bar experience.
<div className="flex flex-col gap-3">
<FilterDropdown.Composed ...>
<Button.Root>Filter</Button.Root>
</FilterDropdown.Composed>
<AppliedFilters.Root ... />
</div>
API Reference
AppliedFilters.Root
The main container that renders all active filter groups with tags and a reset button. Returns null when no filters are active.
| Prop | Type | Default | Description |
|---|---|---|---|
filters | AppliedFilterGroup[] | - | Filter group definitions. Each group needs a key, label, and options array. |
selected | Record<string, string[]> | - | Currently selected values per filter key. Same shape as FilterDropdown's selected prop. |
onRemove | (key: string, value: string) => void | - | Called when a single filter tag is dismissed. |
onRemoveGroup | (key: string) => void | - | Called when all values for a group should be cleared. |
onResetAll | () => void | - | Called when the reset-all button is clicked. If omitted, the button is hidden. |
label | string | 'Applied filters:' | Text label shown before the filter groups. |
resetLabel | string | 'Reset all filters' | Label for the reset-all button. |
labelIcon | React.ElementType | RiFilter3Fill | Icon rendered beside the label. |
AppliedFilters.CustomGroup
A manually composed filter group for non-standard filters (search queries, date ranges, etc.).
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | The group label. |
icon | React.ElementType | - | Icon shown beside the label. |
AppliedFilters.Tag
A pre-styled dismissible tag for use inside CustomGroup.
| Prop | Type | Default | Description |
|---|---|---|---|
onDismiss | () => void | - | Called when the tag dismiss button is clicked. If omitted, no dismiss button is shown. |