Filter Chip

Installation

pnpm dlx shadcn@latest add @ffg/filter-chip

Usage

import { useState } from "react";
import { FilterChip } from "@/components/ui/filter-chip";

const [value, setValue] = useState("all");

<FilterChip
  value={value}
  onChange={setValue}
  ariaLabel="Filter"
  options={[
    { value: "all", label: "All orgs" },
    { value: "mine", label: "My picks" },
  ]}
/>

A controlled chip wrapping a native <select>. Pass the current value, an onChange callback (receives the new value string), and an options array of { value, label } pairs. The optional ariaLabel is forwarded to the select.

Dark mode: the chip shell uses the strong-divider border and foreground text so it stays legible against either background; hover deepens the border to the foreground color.