Three-level Dependent Dropdowns

Filament 4

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:

All 113 Premium Examples for $99

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.

Get the Source Code: All 113 Premium Examples for $99