Back to elements
ElementForm & InputFree
Filter Chips React component
A row of pill filters with counts: a check draws in and the chip grows to fit it, neighbours slide over instead of jumping, and a Clear chip appears once anything is on. The demo filters a list of open roles that reflows as you pick.
When to use the Filter Chips component
Use Filter Chips for quick, visible filters above a list or grid: categories, tags, statuses, locations. Counts help people see what each filter will leave.
For long option lists use Multi Select or a Listbox; for switching between views use Segmented Control or Tabs.
Installation
Add the Filter Chips component to your project with the shadcn CLI. It lands in components/filter-chips.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add https://reactframe.com/r/filter-chips.jsonOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion clsx tailwind-mergeFAQ
- Can only one chip be on at a time?
- Set multiple={false} and picking a chip replaces the previous one; clicking the active chip turns it off.
- Why doesn't the row jump when a chip is selected?
- The check makes room for itself with a width animation and every chip animates its position, so the neighbours slide over.
- How do I combine filters?
- That's up to your data. The demo ORs chips in the same facet (Design or Engineering) and ANDs across facets (and Remote).
