Remove a filter

React

Angular

Web Components

const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);

  const deleteChip = (chip: string) => {
    setChips((prevChips) => prevChips.filter((c) => c !== chip));
  };

<div>
      {chips.map((chip) => (
        <GoabFilterChip
          key={chip}
          content={chip}
          onClick={() => deleteChip(chip)}
          mr="s"
        />
      ))}
    </div>

Allow users to remove active filters by clicking on filter chips, providing clear visual feedback and dynamic updates to filtered results.

When to use

Use this pattern when:

Users have applied filters that need to be removable
You want to show active filter state clearly
Filters should be easy to remove with a single click

Considerations

Each chip should clearly indicate what filter it represents
Provide visual feedback when removing filters
Results should update immediately when a filter is removed
Consider adding an “x” icon or clear affordance to indicate removeability