Three-level Dependent Dropdowns

Filament 4/5

This project showcases a Filament Select component that dynamically updates its options based on selections from two dependent dropdown fields. The implementation uses a hierarchical location example for a company registration form: selecting a country triggers an automatic refresh of the available states, and subsequently choosing a state updates the city options accordingly.

1NMzsbg2g3Xdb1sM90K3veywPhb54Z-metaVW50aXRsZWQgZGVzaWduICgxNSkucG5n-

Get the Source Code:

Only This Example

One-time payment

Full source code for Three-level Dependent Dropdowns

Downloadable ZIP file with the source code

Lifetime access to this example

Best value — all 168 examples

FilamentExamples Membership

$99 /year

$199 lifetime

Access to code of all 168 examples

Future new examples and updates included

FilaCheck Pro package licence included

MCP server included

View membership plans

30-day money-back guarantee

How it works

In this example, we have three Models:

Country
State
City

After selecting the country, all states are shown in the states select input, and after selecting the state, the cities are shown in the cities select input.

The main key to making these three dropdowns work in the edit form is to use them as a not native browser-select input.

To show all three select inputs in one row, we group them and set the column span to full and columns to three.

use Filament\Schemas\Components\Group;
 
Group::make()
    ->schema([
        // All Select Inputs
    ])
    ->columnSpanFull()
    ->columns(3),

For the first country select input, we set these parameters:

Live
Searchable
Label
...

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.