Remove a filter
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) => (
<GoabxFilterChip
key={chip}
content={chip}
onClick={() => deleteChip(chip)}
mr="s"
/>
))}
</div>chips: string[] = ["Chip 1", "Chip 2", "Chip 3"];
deleteChip(chip: string): void {
this.chips = this.chips.filter((c) => c !== chip);
}<div>
<goabx-filter-chip
*ngFor="let chip of chips"
[content]="chip"
(onClick)="deleteChip(chip)"
mr="s">
</goabx-filter-chip>
</div>let chips = ["Chip 1", "Chip 2", "Chip 3"];
const container = document.getElementById("chip-container");
function renderChips() {
container.innerHTML = "";
chips.forEach((chip) => {
const chipEl = document.createElement("goa-filter-chip");
chipEl.setAttribute("version", "2");
chipEl.setAttribute("content", chip);
chipEl.setAttribute("mr", "s");
chipEl.addEventListener("_click", () => deleteChip(chip));
container.appendChild(chipEl);
});
}
function deleteChip(chip) {
chips = chips.filter((c) => c !== chip);
renderChips();
}
renderChips();<div id="chip-container"></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