Filter chip

FilterChip composes Dropdown menu behind a chip-shaped trigger. Presentational Chip has no hover or open state; use this when the chip opens a facet list.

The trigger shares Chip's soft / emphasis pair, not outline Button chrome. The ring stays border-primary-subtle. Hover and open wash bg-primary-subtle. Label ink is text-fg in every state. selected seats on bg-secondary-subtle. Radius is the catalog --radius-scale-md step, same as Chip, so ICS pills do not reshape it. Hover scale stays off.

Leading icon via iconBefore (same slot as Button / Chip). The caret is built-in Phosphor CaretDown.

Single select

Radio rows for a date range. The trigger label follows the current value.

Categories

Labeled groups, a separator, and a reset action. selected lights when the value is not the default.

Multi-select facets

Checkbox rows. selected lights when any facet is on.

Usage

import {
  FilterChip,
  FilterChipContent,
  FilterChipRadioGroup,
  FilterChipRadioItem,
  FilterChipTrigger,
} from '@/components/ui/filter-chip';

<FilterChip>
  <FilterChipTrigger>Last 30 days</FilterChipTrigger>
  <FilterChipContent>
    <FilterChipRadioGroup value={range} onValueChange={setRange}>
      <FilterChipRadioItem value="7d">Last 7 days</FilterChipRadioItem>
      <FilterChipRadioItem value="30d">Last 30 days</FilterChipRadioItem>
    </FilterChipRadioGroup>
  </FilterChipContent>
</FilterChip>

Install

shadcn add @gesso/filter-chip