Filament•7mo ago

Customize Filter style

Hello everyone! I wanted to ask you if and how it would be possible to change the style of Filament's basic filters to something similar to the attached images, i.e. the label not above the filter input/select, but to the side. Thanks for your help!

3 Replies

Sjoerd24•7mo ago

the location of the label you can change with ->inline(false), the rest should be doable with adjusting the CSS. Not my area of expertise though.

LeandroFerreira•7mo ago

maybe using filter forms https://filamentphp.com/docs/3.x/tables/filters/custom

->filters([
    Tables\Filters\Filter::make('filters')
    ->form([
        DatePicker::make('from')
        ->inlineLabel(),
        DatePicker::make('until')
        ->inlineLabel(),
    ]),
])

->filters([
    Tables\Filters\Filter::make('filters')
    ->form([
        DatePicker::make('from')
        ->inlineLabel(),
        DatePicker::make('until')
        ->inlineLabel(),
    ]),
])

You can customize css creating a custom theme https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Custom filters - Table Builder - Filament

Themes - Panel Builder - Filament

Davide CariolaOP•7mo ago

Thank you both! I'll try asap

Gaming

Programming

Customize Filter style