Javascript Vue

Nova 4 filter component based on the Headless UI combobox component1 min read

Nova Combobox Filter

This component is based on the Headless UI Combobox component and adds a multiselect filter to Laravel Nova.


php: >=7.3
laravel/nova: ^4.0


Install via Composer:

composer require harrald/nova-combobox-filter


The nova-combobox-filter extends the Nova select filter. And thus follows the same logic as to how to implement it.


Make a new Filter class in App/Nova/Filters and let it extend the HarraldNovaComboboxFilterNovaComboboxFilter class.

Use the following format:


namespace AppNovaFilters;

use HarraldNovaComboboxFilterNovaComboboxFilter;
use IlluminateHttpRequest;
use IlluminateSupportCollection;

class OpenPaidStateFilter extends NovaComboboxFilter
* The displayable name of the filter.
* @var string
public $name = ‘State’;

* The name of the column to filter on
protected function columnName(): string
return ‘state’;

* Get the filter’s available options.
public function options(Request $request): Collection
return Collection::make([
‘Open’ => ‘open’,
‘Paid’ => ‘paid’,

The property $name is the displayable name of the filter.
The method columnName must return the name of the column to filter on
The options method should return a IlluminateSupportCollection with key/value pairs.

With Dynamic options

public function options(Request $request): Collection
return User::all()->pluck(‘id’, ‘name’);


Use the new filter in you Resource. Follows the same logic as a any other Nova filter

* Get the filters available for the resource.
* @param NovaRequest $request
* @return array
public function filters(NovaRequest $request): array
return [



This package was inspired by optimistdigital/nova-multiselect-filter


This project is open-sourced software licensed under the MIT license.


View Github

Pin It on Pinterest

Generated by Feedzy