Download the PHP package alenadashko/filament-dropdown-checkbox-list without Composer

Filament Dropdown Checkbox List

A searchable dropdown CheckboxList component for Filament v3.

Wraps a standard CheckboxList inside a dropdown trigger with badge-style selected value display, server-side search support, and persistent selection state.

Features

• Dropdown trigger showing selected values as badges (up to 3), then a counter
• Server-side search via a callback
• Client-side search (default, no callback needed)
• Selected options always visible in the list regardless of search query
• Grouped options (nestable to any depth) with a per-group checkbox that toggles all of its descendants, with collapsible groups
• Bulk toggle (select all / deselect all) scoped to visible options
• Options limit to prevent rendering thousands of items
• Full dark mode support
• Translatable strings (English and Polish included)

Requirements

• PHP 8.1+
• Filament 3.x

Installation

Usage

Client-side search (simple)

Options are loaded once, filtering happens in the browser:

Server-side search

Options are loaded from a callback on each search query. Use this for large datasets:

selectedOptionLabelsUsing is required when using searchUsing — it fetches labels for already-selected values so they remain visible when the search query changes.

Grouped options

Render options split into groups. Each group has its own checkbox that selects or deselects all of its child options at once (with an indeterminate state when only some children are selected):

The state is still a flat array of the selected child values (e.g. ['users.view', 'posts.create']) — the group checkbox is only a UI control. Search matches both child labels and group labels (typing a group name reveals the whole group). Grouped options are intended for the default client-side mode and ignore optionsLimit.

Nested groups

Groups can be nested to any depth. A node whose value is an array is a (sub)group; a node whose value is a scalar is a selectable option. Every group, at every level, gets its own checkbox that toggles all of its descendant options and its own collapse toggle (collapsing a parent hides the whole subtree):

Search matches leaf labels as well as any ancestor group/subgroup name, and reveals the matching branch.

Groups are collapsible: clicking a group's title (or its chevron) toggles its child list, while the group checkbox keeps toggling the selection. An active search query temporarily expands every matching group. To render groups collapsed initially:

Server-side searched groups

For large, database-backed grouped datasets, use searchGroupedOptionsUsing(). The callback receives the current $search string and returns the grouped structure on each query (filtering happens on the server):

As with flat server-side search, selectedOptionLabelsUsing() keeps labels for already-selected values that fall outside the current search results.

Using in table filters

Inside a table filter form, call ->live() so the table re-queries immediately when the selection changes. Without it, the component's state is only synced into Livewire's data bag and the filter won't apply until the next request (e.g. a page reload):

Options limit

Prevents rendering too many options at once (default: 50):

Isolated search state (optional)

By default the component stores search state in a Livewire property named {statePath}_search. If your Livewire component uses table filters and you want to prevent the search from interfering with them, add the HasDropdownSearch trait:

This stores search state in a dedicated filterSearches array instead.

Publishing assets

Publish views to customise the template:

Publish translations:

Adding translations

After publishing, add a new language file at:

License

MIT