Faceted Search

Search input with faceted filtering using dropdowns, multi-select checkboxes, and removable filter chips.

Preview

Features

Full-width command bar search input
Single-select dropdown facets
Multi-select checkbox facets with selection count
Removable filter chips with facet labels
Optional count badges on facet options
Clear all filters button
Controlled component via value/onChange

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
faceted-search.tsx	components/data/faceted-search/faceted-search.tsx
search-input.tsx	components/data/faceted-search/search-input.tsx
facet-dropdown.tsx	components/data/faceted-search/facet-dropdown.tsx
facet-multiselect.tsx	components/data/faceted-search/facet-multiselect.tsx
active-filters.tsx	components/data/faceted-search/active-filters.tsx
types.ts	components/data/faceted-search/types.ts
index.ts	components/data/faceted-search/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add input button popover checkbox

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. faceted-search.tsx

faceted-search.tsx

tsx

"use client";

import { SearchInput } from "./search-input";
import { FacetDropdown } from "./facet-dropdown";
import { FacetMultiselect } from "./facet-multiselect";

2. search-input.tsx

search-input.tsx

tsx

"use client";

import { MagnifyingGlass as Search } from "@phosphor-icons/react";

interface SearchInputProps {

3. facet-dropdown.tsx

facet-dropdown.tsx

tsx

"use client";

import { CaretDown as ChevronDown } from "@phosphor-icons/react";
import {
  Popover,

4. facet-multiselect.tsx

facet-multiselect.tsx

tsx

"use client";

import { CaretDown as ChevronDown } from "@phosphor-icons/react";
import {
  Popover,

5. active-filters.tsx

active-filters.tsx

tsx

"use client";

import { X } from "@phosphor-icons/react";
import type { FilterValue } from "./types";

6. types.ts

types.ts

tsx

export interface FacetOption {
  value: string;
  label: string;
  count?: number;
}

7. index.ts

index.ts

tsx

export { FacetedSearch } from "./faceted-search";
export { SearchInput } from "./search-input";
export { FacetDropdown } from "./facet-dropdown";
export { FacetMultiselect } from "./facet-multiselect";
export { ActiveFilters } from "./active-filters";
export type {
  Facet,
  SingleSelectFacet,
  MultiSelectFacet,
  FacetOption,
  FilterValue,
  SearchState,
  FacetedSearchProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/search.tsx

tsx

import { useState } from "react";
import {
  FacetedSearch,
  type Facet,
  type SearchState,

FacetedSearch Props

Prop	Type	Default
facets	Facet[]	required
value	SearchState	required
onChange	(state: SearchState) => void	required
placeholder	string	"Search..."
className	string	-