Faceted filteradmin

Popover multi-select filter for a column or facet with option counts, search for long lists and a clear action.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/faceted-filter

의존 아이템button checkbox input locale popover style

Default

Selected: confirmed

faceted-filter-demo.tsx

"use client";
import * as React from "react";import { FacetedFilter, type FacetedFilterOption } from "@/components/ui/faceted-filter";
const statuses: readonly FacetedFilterOption[] = [  { value: "confirmed", label: "Confirmed", count: 128 },  { value: "pending", label: "Pending", count: 14 },  { value: "cancelled", label: "Cancelled", count: 9 },  { value: "no-show", label: "No-show", count: 0, disabled: true },];
export default function FacetedFilterDemo() {  const [value, setValue] = React.useState<string[]>(["confirmed"]);  return (    <div className="flex flex-col items-start gap-3">      <FacetedFilter title="Status" options={statuses} value={value} onValueChange={setValue} />      <p className="text-sm text-muted-foreground">Selected: {value.join(", ") || "none"}</p>    </div>  );}