F

Filament•7mo ago•

8 replies

Sahil Sayyad

Multi-select Filter Indicator: How to remove a single selection (not all) when clicking "×"?

What I am trying to do:

I'm using a MultiSelect inside a Filter::make() form to allow filtering records by multiple services. Each selected service shows as a separate indicator, and I want to allow users to remove only one of those selected services by clicking "×" on the corresponding indicator, without clearing the whole filter.

What I did so far:
I followed Filament's indicateUsing() approach to return multiple indicators like this:

Filter::make('services')
->form([
MultiSelect::make('services')
->label('Filter by Services')
->options(Service::pluck('service_name', 'id'))
->searchable()
->preload(),
])
->query(function (Builder $query, array $data) {
if (! isset($data['services']) empty($data['services'])) return;

$query->whereHas('services', fn ($q) =>
$q->whereIn('services.id', $data['services'])
);
})
->indicateUsing(function (array $data) {
if (empty($data['services']) !is_array($data['services'])) {
return [];
}

return collect($data['services'])->map(function ($serviceId) {
$service = Service::find($serviceId);
if (! $service) return null;

return \Filament\Tables\Filters\Indicator::make($service->service_name)
->removeField('services'); // Tried also ->removeField('services', $serviceId) but same result
})->filter()->values()->all();
});

My issue:
The indicators display correctly, and I see one per selected service. But when I click "×" on any indicator, it clears the

entire services filter, instead of just removing the one I clicked.

Expected behavior:
Clicking "×" on any service indicator should just remove that one service from the MultiSelect field, not clear all

selections.

Any guidance on whether this is possible natively, or do I need to build a custom filter/modal?

Thank you in advance!