Filter chips

Pro

Active filters as removable chips, with Clear all. Renders nothing when there are none.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/filter-chips

Brings in: data, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { FilterChips } from "@/components/filter-chips"
import type { FilterChip } from "@/lib/data"

const initial: FilterChip[] = [
  { id: "env", label: "Environment", value: "Production" },
  { id: "status", label: "Status", value: "Failed" },
  { id: "when", label: "Started", value: "Last 7 days" },
]

export default function Example() {
  const [filters, setFilters] = React.useState(initial)
  return <FilterChips filters={filters} onRemove={(id) => setFilters((all) => all.filter((f) => f.id !== id))} onClear={() => setFilters([])} />
}

<FilterChips>

Prop	Type	Default	Description
filtersrequired	`FilterChip[]`	—	The active filters, each shown as label: value.
onRemoverequired	`(id: string) => void`	—	Called with a filter's id when its chip is removed.
onClear	`(() => void) \| undefined`	—	Shows Clear all; called when it's clicked.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under filterChips in <LocaleProvider strings={{ … }}>; the table is exported as filterChipsStrings.

Key	English
remove	Remove filter {label}: {value}
clearAll	Clear all